js監聽transition過渡事件

html

        <div id="mydiv">
            
        </div>

style

    #mydiv{
        width:100px;
        height:100px;
        background:red;
        -webkit-transition: width 2s ease-in-out;
        transition: width 2s ease-in-out;
    }
    #mydiv:hover{
        width:400px;
    }

js

        document.getElementById("mydiv").addEventListener("transitionend",function(e){
            this.innerHTML="過渡事件觸發--過渡以完成"
        })

上面的例子，當鼠標覆蓋div時，觸發transition過渡效果，將寬度變為400px。

然后js監聽了div的過渡效果的結束事件，當過渡效果結束時，往當前元素（div）添加文本內容。

當然，還可以監聽，過渡事件的開始，進行，結束事件，分別為transitionstart、transitionrun、transitionend。