标签：
W3C中对transition是这样描述的：允许css的属性值在一定的时间内平滑的过渡，也就是说，以动画的效果改变css的属性值。
transition主要包含4个属性值：transition-property：样式名；transition-duration：持续时间；transition-timing-function：缓动公式；transition-delay：延迟多长时间才触发。接下来我们来详细讲下这四个属性值。
transition-property
transition-property是用来指定当元素的哪个属性值变化时，就执行transition效果的。主要有以下几个值：none（没有属性会获得过渡效果，也就是说设置了none，此元素不会有过渡效果，就跟没设置transition一样）；all（只要元素的任何一个属性改变，就会有过渡效果，这是默认值）；property（具体的属性名，可以有多个，用逗号分开，比如：transition-property: width,height;）；
transition-duration
动画持续的时间，单位可以是s，也可以是ms。我们可以多个持续时间值，比如：transition-duration:1s, 1500ms, 2s;transition-property:width,height,color。其中1s对应width属性改变，1500ms对应height属性的改变，2s对应color属性的改变。默认值为0.
transition-timing-function
缓动公式，根据时间的推进，去改变属性值的变换速度。它主要有6个值：
ease（逐渐变慢），默认值
linear（匀速）
ease-in（加速）
ease-out（减速），跟ease的区别是，减速的变化程度不一样。
ease-in-out（先加速，再减速）
cubic-bezier，允许你自定义一个时间曲线，通过cubic-bezier(x1,y1,x2,y2)，此属性值可以模拟以上5个状态，只要传入相应的x1,y1,x2,y2给cubic-bezier(x1,y1,x2,y2)。这4个值必须在[0,1]之间，否则无效。
transition-delay
延迟多长时间，才进行变化，单位有s，ms。默认值为0.
举个例子来展示下transition如何使用：
<style>
#move{
position:absolute;
left:0px;
width:100px;
height:100px;
background:red;
font-size:14px;
}
#move:hover{ //鼠标移动到move元素时，就会动态的改变它的三个属性值background，font-size，left。
background:green;
font-size:26px;
left:700px;
transition: all 2s ease 0.3s;
-moz-transition: all 2s ease 0.3s;
-webkit-transition: all 2s ease 0.3s;
-o-transition: all 2s ease 0.3s;
}
</style>
著名的Bootstrap的动画就是基于transition的。另外，当上面的这个动画（过渡效果）结束后，就会触发一个transitionEnd的事件。此transitionEnd在不同浏览器下具有不同的写法，比如：webkitTransitionEnd,oTransitionEnd等。那么，我们如何来取得这个可用的事件名呢？
第一种方法：动态创建一个元素与一个样式表插入DOM树中，然后改变目标样式值，从而触发回调，得到事件的名字，最后把元素和样式表从DOM树中删除。
(function(){
var span = document.createElement("span"); //创建一个元素span
span.id = "chaojidan";
span.innerHTML = "test";
var body = document.body || document.documentElement;
var style = document.createElement("style"); //创建一个元素style
body.appendChild(span);
body.appendChild(style); //添加到页面中
style.innerHTML = "#chaojidan{color:red;opacity:0;height:1px;overflow:hidden;-moz-transition:color 0.1s;-webkit-transition:color 0.1s;-o-transition:color 0.1s;}"; //设置元素span的样式，只要改变span的color属性值，就会触发过渡动画。
"transitionend otransitionend oTransitionEnd webkitTransitionEnd".replace(/\w+/g,function(type){ //type就是每次正则匹配的值
span.addEventListener(type,function(e){ //给元素span绑定过渡动画结束后的触发的事件，这里绑定了4个。
window.transitionEnd = e.type; //浏览器支持哪个名字，就会执行到这里，然后把事件的类型，赋给window对象的transitionEnd。
},false);
});
setTimeout(function(){span.style.color="black";}); //执行span元素的过渡动画，用时100ms。
setTimeout(function(){
body.removeChild(span);
body.removeChild(style);
},1000);
})();
第二种方法：从事件的构造器着手，如果把事件构造器的名字直接传入到createEvent，不抛错，就证明浏览器支持这种事件。
var getTransitionEnd = function(){
var obj = {
"TransitionEvent":"transitionend",
"WebKitTransitionEvent":"webkitTransitionEnd",
"OTransitionEvent":"oTransitionEnd",
"otransitionEvent":"otransitionEnd"
};
var ret;
for(var name in obj){
try{
var a = document.createEvent(name);
ret = obj[name];
break;
}catch(){}
}
getTransitionEnd = function(){ //重写此方法，只需要检测一次，下次直接返回缓存结果，这叫做惰性函数。
return ret;
}
return ret;
}
最后，我们用css transition实现一个动画效果：
<style>
#test{
width:100px;height:100px;position:absolute;background:red;
left:0;
transition: left 5s;
-moz-transition: left 5s;
-webkit-transition: left 5s;
-o-transition: left 5s;
}
</style>
<script>
var $ = function(id){
return document.getElementById(id);
}
var el = $("test");
$("run").onclick = function(){ //点击run按钮时，触发过渡动画效果，此动画把元素test从0移动到700，用时5s。
el.style.left = "700px";
}
$("stop").onclick = function(){ //点击stop按钮，将会停止过渡动画。
var left = window.getComputedStyle(el,null).left; //得到元素test的当前left的值
el.style.left = left; //当test元素在运动时，你点击了stop按钮的话，test元素会马上停止。
["", "-moz-", "-o-", "-webkit-"].forEach(function(prefix){
el.style.removeProperty(prefix +"transition"); //DOM2定义的style方法，低版本IE浏览器不支持。这里只能删除标签上的style样式值
});
}
</script>
上面的例子暴露出transition的弱点了，虽然我们停止动画时，可以通过取当前的left值然后重新赋值的手段实现了，但是只要transition这个样式没有没清除掉，那么，我们后面每一次变动left这个样式值，都会发生过渡动画效果。而想移除这个transition样式，只有当它写在标签的style属性中时，我们才能很好的删除。如果它是定义在内部样式（我们例子中写法）或外部样式，那么要删除就比较麻烦了（可以通过CSSStyleSheet对象删除）。但是如果外部样式是跨域获取的，那么删除样式规则这个手段就失效了，意思就是无法删除transition样式值了。
因此，使用transition实现动画效果，可控性太差，不适合作为一个框架的动画引擎的实现手段。
加油！
标签：
原文地址：http://www.cnblogs.com/chaojidan/p/4211584.html
