transition:过度属性transition-property 规定设置过度效果的css属性的名称,默认可以写all
transition-duration 规定完成过度效果需要多少秒或毫秒
transition-timing-function: 默认easetransition-delay:延时时间ease:逐渐变慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速在减速
cubic-bezier:贝塞尔曲线
transitionend:过度完成事件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);
}注:1在transition里,如果写了多个,那没改变一次样式,就会触发一次事件
2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
Title#nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
var oHome=document.getElementById("nav");
var count = 10;
oHome.onclick = function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
addEnd(this,function(){
count += 20;
oHome.style.transform = 'translate(0,'+ count +'px)'
})
}
function addEnd(obj,fn) {
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
transform:变形旋转:rotate():度数
斜切:skew():度数skewX
skewY
缩放:scale():正数、负数、小数scaleX
scaleY
位移:translate():css支持的单位都可以translateX
translateYtransform的执行顺序:后写的先执行transform: scale(2) rotate(50deg); 先执行旋转,在执行缩放
以上transform的值,也会根据中心点(transform-origin)来改变