我对TRANSITION的理解

transition是CSS3新增加的css属性，主要作用是把css属性从一个值过渡到另一个值，可以自调速度曲线。

Internet Explorer 10、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);
};