12/css3 animationend.html

<!DOCTYPE html>
<html>

<head>
    <style>
    #myDIV {
        margin: 25px;
        width: 550px;
        height: 100px;
        background: orange;
        position: relative;
        font-size: 20px;
    }
    /* Chrome, Safari, Opera */

    @-webkit-keyframes mymove {
        from {
            top: 0px;
        }
        to {
            top: 200px;
        }
    }

    @keyframes mymove {
        from {
            top: 0px;
        }
        to {
            top: 200px;
        }
    }
    </style>
</head>

<body>
    <p>
        (此示例，未使用 vuejs，目的了解 css animations 的使用)
        <br> 该实例使用了 addEventListener() 方法为 DIV 元素添加
        <br> "animationstart", "animationiteration" 和 "animationend" 事件。
        <br> 并使用 onclick 事件，触发 动画
    </p>
    <div id="myDIV" onclick="myFunction()">点我开始动画</div>
    <script>
    var x = document.getElementById("myDIV")

    // 使用 JavaScript 开始动画
    function myFunction() {
        x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
        x.style.animation = "mymove 4s 2";
    }

    //  Chrome, Safari 和 Opera
    x.addEventListener("webkitAnimationStart", myStartFunction);
    x.addEventListener("webkitAnimationIteration", myIterationFunction);
    x.addEventListener("webkitAnimationEnd", myEndFunction);

    x.addEventListener("animationstart", myStartFunction);
    x.addEventListener("animationiteration", myIterationFunction);
    x.addEventListener("animationend", myEndFunction);

    function myStartFunction() {
        this.innerHTML = "animationstart 事件触发 - 动画已经开始";
        this.style.backgroundColor = "pink";
    }

    function myIterationFunction() {
        this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
        this.style.backgroundColor = "lightblue";
    }

    function myEndFunction() {
        this.innerHTML = "animationend 事件触发 - 动画已经完成";
        this.style.backgroundColor = "lightgray";
    }
    </script>
</body>

</html>