監聽css3的animation動畫和transition事件

時間 2019-11-24

標籤監聽 css3 css animation 動畫 transition 事件欄目 CSS 简体版

原文原文鏈接

webkit-animation動畫有三個事件：

開始事件: webkitAnimationStart
結束事件: webkitAnimationEnd
重複運動事件: webkitAnimationIteration

css3的過渡屬性transition，在動畫結束時，也存在結束的事件：webkitTransitionEnd

注意：transition 僅有這一個事件javascript

var o = document.getElementById("div1");
// 動畫開始時事件
o.addEventListener("webkitAnimationStart", function() {
    console.log("動畫開始");
})
// 動畫重複運動時事件
o.addEventListener("webkitAnimationIteration", function() {
    console.log("動畫重複運動");
})
// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
    console.log("動畫結束");
})
複製代碼

代碼實例：css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>webkitAnimationEnd</title>
<style type="text/css">
#div1{
    margin: 200px auto 0;
    width: 200px;
    height: 200px;
    color: #fff;
    background-color: #000;
    -webkit-animation: transform 3s 2 ease;
}
@-webkit-keyframes transform {
    0%{
        -webkit-transform: scale(1) rotate(50deg);
    }
    30%{
        -webkit-transform: scale(2) rotate(100deg);
    }
    6%{
        -webkit-transform: scale(0.5) rotate(-100deg);
    }
    100%{
        -webkit-transform: scale(1) rotate(0);

    }
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var o = document.getElementById("div1");
// 動畫開始時事件
o.addEventListener("webkitAnimationStart", function() {
    alert("動畫開始");
})
// 動畫重複運動時事件
o.addEventListener("webkitAnimationIteration", function() {
    alert("動畫重複運動");
})
// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
    this.className = "";
    alert("動畫結束");
})
</script>
</body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。