CSS3知识点总结---transitionend

Webkit内核：

obj.addEventListener('webkitTransitionEnd',function(){},false);

firefox:

obj.addEventListener('transitionend',function(){},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box{width:100px;height:100px;background:red;transition:1s width,2s 1s height,3s 3s background;}
    
</style>
<body>
    <div id="box" class="box">
        
    </div>
    <script>
        var box = document.getElementById("box");
        box.onclick= function(){
            this.style.width = this.offsetWidth + 100 + "px";
        }

        

        function addEnd(obj,fn){
            obj.addEventListener("webkitTransitionEnd",fn,false)
            obj.addEventListener("transitionend",fn,false)
        }

        addEnd(box,function(){
            alert("end");
        })
    </script>
</body>

</html>

false);

posted on 2017-01-24 11:15 floated 阅读(184) 评论(0) 收藏举报