过渡 transtion API

API

关于过渡transition的事件只有一个，是transitionend事件，它发生在过渡事件完成后

[注意] safari3.1-6、ISO3.2-6.1、android2.1-4.3需要使用webkitTransitionEnd事件

属性

transitionEnd的事件对象具有以下3个私有属性

propertyName：发生transition效果的CSS属性名

elapsedTime：代表发生实际效果的持续时间。若完整进行，则返回完整时间；若中途中断，则返回实际时间

[注意] 该属性具有兼容性问题，chrome返回持续时间加延迟时间，而其他浏览器只返回持续时间。

<style>
#test{height: 100px;width: 100px;background-color: pink;
    transition: width 1.5s 0.5s;}
#test:hover{width: 200px;}
</style>

<div id="test"></div>
<script>
test.addEventListener("transitionend", myFunction);
function myFunction(e){
    e = e || event;
    test.innerHTML = 'propertyName:' + e.propertyName + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
}
</script>

pseudoElement：如果transition效果发生在伪元素，会返回该伪元素的名称，以“::”开头。如果不发生在伪元素上，则返回一个空字符串''

[注意] 若transition效果发生在伪元素上，IE浏览器将不会触发transitionEnd事件。

<style>
#test{height: 100px;width: 100px;position: relative;background-color: lightblue;}
#test:before{content:'我是伪元素';position: absolute;height: 100px;width: 100px;background-color: pink;
    left:200px;}
#test:hover:before{width: 200px;transition: width 1.5s 0.5s;}
</style>

<div id="test"></div>
<script>
test.addEventListener("transitionend", myFunction);
function myFunction(e){
    console.log(event)
    e = e || event;
    test.innerHTML = 'propertyName:' + e.propertyName + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
}
</script>

注意事项

【1】过渡分为两个阶段：前进阶段和反向阶段。transitionend事件在前进阶段结束时会触发，在反向阶段结束时也会触发

var index = 0;
//兼容低版本safari、IOS、android
test.addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
test.addEventListener("transitionend", myFunction);
function myFunction() {
    index++;
    this.innerHTML = index;
}

【2】过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

    transition: width 1s,background-color 1s;
    -webkit-transition: width 1s,background-color 1s;

【3】如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

[注意] 在低版本webkit内核浏览器里只触发1次

    transition:border-width 1s;
    -webkit-transition: border-width 1s;

【4】如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数。如果发生过渡的属性是border-width和width，则经过计算后过渡事件应该触发5次

[注意] 在低版本webkit内核浏览器中处理情况也一致

.test{
    width: 50px;
    border: 1px solid black;
    transition:all 1s;
    -webkit-transition: all 1s;
}    
.test:hover{
    border-width: 10px;
    width: 100px;
}

【5】如果过渡延迟时间为负值，且绝对值大于等于过渡持续时间时，低版本webkit内核浏览器不会产生过渡效果，但会触发过渡事件；而其他浏览器即不会产生过渡效果，也不会触发过渡事件。

    transition:width 1s -1s;
    -webkit-transition: width 1s -1s;

【6】如果过渡属性存在复合属性及该复合属性包含的非复合属性，则浏览器计算复合属性的子属性时，不会重复计算已包含的属性

[注意] 低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次

.test{
    border: 1px solid black;
    transition:border-width 1s,border-left-width 2s;
    -webkit-transition: border-width 1s,border-left-width 2s;
}    
.test:hover{
    border-width:10px;
}

[注意] 当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响

var index = 0;
//兼容低版本safari、IOS、android
test.addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
test.addEventListener("transitionend", myFunction);
function myFunction() {
    index++;
    this.innerHTML = index;
    if(index == 1){
        test.removeEventListener("webkitTransitionEnd", myFunction);
        test.removeEventListener("transitionend", myFunction);
    }
}