我對TRANSITION的理解

transition是CSS3新增長的css屬性，主要做用是把css屬性從一個值過渡到另外一個值，能夠自調速度曲線。

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 transition 屬性，Safari 支持替代的 -webkit-transition 屬性。

但Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

 

語法：transition: property duration timing-function delay;

transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果須要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果什麼時候開始。

對於兼容性，css主要分：transition 和 -webkit-transition，js方面有node.style['webkitTransform']和node.style['Transform']，

js方面還有一個webkitTransitionEnd的事件，就是當transition動畫結束時，會觸發這樣一個事件，不過只能在在WebKit引擎的瀏覽器中使用。

function setPosition(node, left) {
node.style['webkitTransform'] = "translate3d("+left+"px, 0, 0)";
}

function addTransitions(node){
node.style['webkitTransition'] = '-webkit-transform' + ' 20s ease-in-out';

node.addEventListener('webkitTransitionEnd', function(e){
window.setTimeout(function(){
e.target.style['webkitTransition'] = 'none;'
}, 0)
})
}

function cleanTransitions(node){
node.style['webkitTransition'] = 'none';
}

先是使用setPositon設置上node的css屬性最終要到達的值，而後再使用addTransition觸發transiton動畫。

不過這裏有一個問題要，若是在頁面加載過程當中直接使用這兩個函數，只能看到最終的結果，動畫不會發生。

還有若是一個dom元素，是被動態建立並插入到dom中的，緊接着使用這兩個函數，也不會看到動畫的效果，只會看到最終的效果。

document.body.onclick = function(){ var box = document.createElement("div"); box.className = 'box'; this.appendChild(box); setPosition(box,'400'); addTransitions(box); };