transition：过度属性
-
transition-property 规定设置过度效果的css属性的名称，默认可以写all
-
transition-duration 规定完成过度效果需要多少秒或毫秒
-
transition-timing-function: 默认easetransition-delay：延时时间
- ease:逐渐变慢
- linear:匀速
- ease-in:加速
- ease-out:减速
- ease-in-out:先加速在减速
- cubic-bezier：贝塞尔曲线
transitionend：过度完成事件
1 function addEnd(obj,fn){ 2 obj.addEventListener('WebkitTransitionEnd',fn,false); 3 obj.addEventListener('transitionend',fn,false); 4 } 5 function removeEnd(obj,fn){ 6 obj.removeEventListener('WebkitTransitionEnd',fn,false); 7 obj.removeEventListener('transitionend',fn,false); 8 }
注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件
2注意重复触发transitionend事件。比如下面重复改变div的y轴位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;} 8 </style> 9 </head> 10 <body> 11 <div id="nav"></div> 12 <script> 13 var oHome=document.getElementById("nav"); 14 var count = 10; 15 oHome.onclick = function(){ 16 count += 20; 17 oHome.style.transform = 'translate(0,'+ count +'px)' 18 addEnd(this,function(){ 19 count += 20; 20 oHome.style.transform = 'translate(0,'+ count +'px)' 21 }) 22 } 23 function addEnd(obj,fn) { 24 obj.addEventListener('WebkitTransitionEnd',fn,false); 25 obj.addEventListener('transitionend',fn,false); 26 } 27 </script> 28 </body> 29 </html>
transform：变形
-
旋转：rotate()：度数
-
斜切：skew()：度数
- skewX
- skewY
-
缩放：scale()：正数、负数、小数
- scaleX
- scaleY
-
位移：translate()：css支持的单位都可以
- translateX
- translateY
-
transform的执行顺序：后写的先执行
- transform: scale(2) rotate(50deg); 先执行旋转，在执行缩放
以上transform的值，也会根据中心点（transform-origin）来改变