关于CSS3动画结束监听的问题

发布网友发布时间：2022-05-14 05:05

共2个回答

懂视网时间：2022-05-14 09:26

当css3的animation完成一个动画，我们想让动画保持在终止的状态或其他一些事件，要怎么做呢？

我们可以监听 webkitAnimationEnd 事件就可以

// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
 console.log("动画结束");
})

-webkit-animation动画有三个事件：

开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
 console.log("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
 console.log("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {
 console.log("动画结束");
})

示例：

<!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">#p1{
 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><p id="p1"></p><script type="text/javascript">var o = document.getElementById("p1");// 动画开始时事件o.addEventListener("webkitAnimationStart", function() {
 alert("动画开始");
})// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() {
 alert("动画重复运动");
})// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { this.className = "";
 alert("动画结束");
})</script></body></html>

css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd

注意：transition 仅有这一个事件

【相关推荐】

1. 详细介绍CSS3中animation-direction属性

2. 必须掌握的CSS3动画（Animation）的8大属性

3. 利用animation属性实现循环间的延时执行实例教程

4. 详解css3中两种暂停方式（transition、animation）

热心网友时间：2022-05-14 06:34

<html>
<script src="scripts/jquery.min.js"></script>
<head>
    <style>
        div { width: 100px; height: 100px; background: blue; transition: width 1s; -moz-transition: width 1s; /* Firefox 4 */ -webkit-transition: width 1s; /* Safari and Chrome */ -o-transition: width 1s; /* Opera */ }

        div:hover { width: 300px; }
    </style>
</head>
<body>
    <div id="demo">
    </div>
    <br />
    <script type="text/javascript">

$("div").one("webkitTransitionEnd otransitionend transitionend",function(){
alert("11");
})

    </script>
</body>
</html>

我用我的代码测试正常，，，你的话，懒得打，，

还有你的你的ALERT，输出的11是变量吗？？？为什么没有""

alert("11")

应该可以输出

追问嗯，alert(11)直接输出数字啊，这是可以的，我这个在哪儿都不行。

追答你输出数字，肯定要""引起来啦。。。。

想问下谁告诉你可以的，，，

反正我上面的就正常，，，可以监听到结束，，而且结束可以执行其它动作。