css3 transition 位置,CSS3 transition介绍

相当于将过渡过程从头至尾分成4步，在每一步瞬间完成过渡。最上面的例子中已经有所展示，很容易理解

transition-delay延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作。单位是s秒或ms毫秒。

w3cschool上没说的是，该属性还能设负时间，意思是让过渡动作从该时间点开始启动，之前的过渡动作不显示。

你可以单独指定这4个子属性，也可以像background等属性一样，合并在transition属性里指定。

但合并时要注意，因为有transition-duration和transition-delay都是时间，浏览器会根据先后顺序，将第一个时间认作为transition-duration，第二个时间认作为transition-delay。

是分开或者合并指定并无标准答案。分开指定可能代码易读性高一点。

但当页面需要适应各浏览器时，每个都要加上-ms-，-moz-等前缀，代码会变的很多，合并在一起代码稍微少点。

另外也可以同时指定多个过渡效果，例如transition: background 1s linear 2s, border-radius 2s ease-in 3s;。

触发过渡的方式

常见的就是伪类触发:hover，:focus，:active，:checked等。还有例如@media媒体查询，根据设备大小，横屏竖屏切换时触发。

还有如click，keydown等JS事件触发。页面加载也能触发就不一一列举了。总之过渡的本质是在时间段内平滑过渡属性值，与怎么触发没有关系。

transitionend事件

transition既然涉及时间，自然就有事件。参照MDN有transitionend事件，顾名思义就是过渡结束时触发该事件。但该事件比较坑。例如过渡padding时，代码如下：

#tempDiv {

padding: 1px;

transition-property: padding;

transition-duration: 1s;

}

#tempDiv:hover {

padding: 5px;

}

function showMessage() {

console.log('finished'); //过渡结束时触发打印log

}

var element = document.getElementById("tempDiv");

element.addEventListener("transitionend", showMessage, false);

你可以代码贴到浏览器里试试，结果出现4条log。

因为过渡属性指定的是padding，所以在padding-top，padding-right，padding-bottom，padding-left过渡结束时均触发了transitionend事件。因此log被打印了4次。

如果上述CSS中将transition-property: padding;改为all，同样会触发4次。

除非你改成transition-property: padding-top;这样才能只触发一次，但现实中只过渡一边的场景非常少，通常都是4边同时过渡，

因此例如padding，margin，border之类的属性，用transitionend事件会有多次捕捉的情况发生。

隐式过渡

transition过渡时有时会出现一些比较暧昧的情形，比如设成em的属性，如你所知em是根据font-size来计算的。

类似还有rem，vh，vw等都是根据另一个属性的值来计算得到它的值。

举个例子padding:2em;，如果font-size被改变了，此时padding的“书面值”不变，仍旧是2em，但“实际值”将会发生变化并触发transition过渡。这被称作“隐式过渡”。

多数浏览器会实现隐式过渡，但传闻IE很特别，具体有多特别我也没试过。没试过就轻信传闻好像很不严谨，但根据IE过往的口碑，我宁可信其有…前端工程师都懂的。

开关过渡和永久过渡

开关过渡，顾名思义就是触发源的事件结束后会恢复到原始状态。永久过渡就是过渡后不恢复到原始状态。

上面的例子都是开关过渡，当鼠标hover事件结束后，图片恢复原始尺寸。但永久过渡的话，鼠标hover事件结束后，图片仍旧保持放大后的尺寸。

//开关过渡

.transition {

transition: all 1s ease-in-out;

}

.transition:hover {

transform: scale(1.5);

}

//永久过渡

.forever {

transition: all 1s ease-in-out 999999s;

}

.forever:hover {

transform: scale(1.5);

transition: all 1s ease-in-out;

}

因为回到原始尺寸的transition-duration被设成了一个很大的时间，999999s差不多有12天，理论上你页面开12天就能看到关闭过渡的效果，但现实等于永久过渡。该技巧无需任何JS脚本。

auto过渡

通常我们属性过渡时，都是定值到定值的过渡，例如width:100px过渡到200px。但要过渡到width:auto就不行了。

就算你指定transition: width 1s linear;会发现根本不会有1秒的平滑的过渡效果，而是瞬间完成过渡。

.div1 {

background-color: red;

width: 100px;

height: 50px;

}

#box1:hover {

width: auto;

transition: width 1s linear;

}

如果想要过渡效果，必须将auto转换为固定值。那么问题来了，如何转换呢？

需要靠JS，通过getComputedStyle获取auto后的固定值后，通过style设置该值，然后再触发CSS的过渡效果。

window.onload = function(){

var box = document.getElementById("box2"),

originWidth = box.clientWidth,

width2AutoLater = null,

width2OriginLater = null;

var width2Auto = function(element, time) {

if (typeof window.getComputedStyle == "undefined") return;

var width = window.getComputedStyle(element).width;

element.style.width = "auto";

var targetWidth = window.getComputedStyle(element).width;

element.style.width = width;

setTimeout(function() {

element.style.transition = "width "+ time +"ms linear";

element.style.width = targetWidth;

}, 10);

};

var width2Origin = function(element, time) {

setTimeout(function() {

element.style.transition = "width 0s linear";

element.style.width = originWidth + "px";

}, 10);

};

function callLater(func, paramA, paramB){

return function(){

func.call(this, paramA, paramB);

};

}

width2AutoLater = callLater(width2Auto, box, 1000);

width2OriginLater = callLater(width2Origin, box, 1000);

box.addEventListener("mouseenter", width2AutoLater);

box.addEventListener("mouseleave", width2OriginLater);

}

代码耐心看看应该能看明白。无CSS，全靠JS实现过渡效果。

思路：给div注册了mouseenter和mouseleave事件来模拟hover效果。

mouseenter绑定width2Auto函数，函数里临时将div的width设为auto后，用getComputedStyle得到宽度值，将该宽度值和transition设进该div的style里。

mouseleave绑定width2Origin函数，函数里将div的width改回初始值。

因为注册事件的函数addEventListener的第二个参数是回调函数名，不能给回调函数传参数。

因此，使用闭包的特性，定义了callLater中间函数，函数里通过call调用上述两个函数。