标签:
Transition:过渡
1>过渡属性:
transition-property 要运动的样式 (all || [attr] || none)
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease:(逐渐变慢)默认值
linear:(匀速)
ease-in:(加速)
ease-out:(减速)
ease-in-out:(先加速后减速)
cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )
动画工具网址:http://matthewlein.com/ceaser/
过渡属性应用实例:
<style>
div{width:100px;height:100px;background:blue;transition:1s;} //参数一:过渡时间为1秒,鼠标划过一1秒内div原样式发生改变(过渡时间,可以是秒-s,或者是毫秒ms)
div{width:100px;height:100px;background:blue;transition:1s 2s;} //参数二:延迟2秒,执行过渡1秒的效果(延迟时间)
div{width:100px;height:100px;background:blue;transition:1s 2s width;} //参数三:只让width属性发生1秒过渡(要运动的样式) 注:运动样式,使用‘ , ‘隔开,可以一次写多个控制;如:1s width,2s height,3s background;
div{width:100px;height:100px;background:blue;transition:1s 2s width ease-out;} //参数四:width发生1秒过渡,以减速形式过渡 (运动形式)
div:hover{width:200px;height:200px;background:red;}
</style>
<div></div>
2>过渡完成事件:
(a).监听事件:
Webkit内核: obj.addEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);
(b).删除监听事件:
Webkit内核: obj.removeEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.removeEventListener(‘transitionend‘,function(){},false);
完成事件应用示例:
<style>.box{width:100px;height:100px;background:red; transition:1s width;}</style>
<divclass="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function(){
this.style.width=this.offsetWidth+100+"px";
};
addEnd(oBox,function(){ //当过渡完成后,触发addEnd事件
alert("end");
});
function addEnd(obj,fn) {
obj.addEventListener(‘WebkitTransitionEnd‘,fn,false); //监听过渡后的事件
obj.addEventListener(‘transitionend‘,fn,false);
}
function removeEnd(obj,fn) {
obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false); //删除监听过渡后的事件
obj.removeEventListener(‘transitionend‘,fn,false);
}
</script>
2D变换
transform:
1>transform属性:
rotate() 旋转函数 取值度数 deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX() skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX() scaleY()
translate() 位移函数
translateX() translateY()
属性应用实例:
<style>
div{width:100px;height:100px;background:red;transition:2s;} //注意:transform必须要配合transition使用,否则看不到效果
div:hover{-webkit-transform:roate(360deg);} //旋转360度
div:hover{-webkit-transform:skewX(45deg);} //横向倾斜45度 skewY:为纵向倾斜;
div:hover{-webkit-transform:scale(1.1);} //放大1.1倍 scale:横向和纵向同时放大;scaleX:只横向放大; scaleY:只纵向放大
div:hover{-webkit-transform:translate(200px);} //横向位移200px 接收两个参数,第一个是横向,第二个是纵向
</style>
<div></div>
2>Transform 执行顺序问题 — 后写先执行
3>matrix(a,b,c,d,e,f) 矩阵函数
a.通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
b.通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
c.通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
d.通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
4>变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand‘);
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
标签:
原文地址:http://www.cnblogs.com/nemoDuoo/p/5105053.html