用addEventListener监听css3动画的webkitAnimationEnd，函数重复执行问题

最新推荐文章于 2023-06-14 16:34:55 发布
原创 最新推荐文章于 2023-06-14 16:34:55 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在多个CSS3动画连续播放时，利用addEventListener监听webkitAnimationEnd事件，并在当前动画结束后触发下一个动画。为避免多次重复注册监听器导致的问题，文章提供了移除监听器的方法。

用addEventListener监听css3动画的webkitAnimationEnd时，若有多个动画，监听当前动画结束后，播放下一个动画，内部的函数会被重复执行。

解决办法：每次监听完都将这个监听事件移除掉。

监听如下：

lastDasnCont.addEventListener("webkitAnimationEnd", fn, false);

解决代码如下：

lastDasnCont.removeEventListener("webkitAnimationEnd", fn, false);



Android动画onAnimationEnd方法会重复调用的问题及解决方法
ByteProwl的博客
09-25 824
Android动画中的onAnimationEnd()方法被调用两次的问题可能是由于多次设置监听器或动画重复播放导致的。为了解决这个问题，我们可以确保只设置一次监听器，并检查动画是否被设置为重复播放。如果你确实需要重复播放动画，并且只希望在最后一次播放完成时调用onAnimationEnd()方法，可以通过其他方式实现，例如使用计数器来判断动画的播放次数。多次设置监听器：当我们多次为同一个动画设置监听器时，每次设置都会添加一个新的监听器实例，从而导致onAnimationEnd()方法被多次调用。
浅谈CSS3动画的回调处理
09-24
在本文中，我们将深入探讨如何在CSS3动画中实现回调处理。回调处理在JavaScript编程中非常常见，它允许我们在特定事件发生后执行某些代码，例如动画结束时。CSS3提供了两种方式来处理动画的回调：`transition`和`...
动画完成后触发处理事件（animationend）和过渡效果完成后触发处理事件（transitionend）
祥哥的说
12-10 5172
animationend 事件在 CSS 动画完成后触发。 CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 语法 object.addEventListener("webkitAnimationEnd", myS...
HTML DOM 事件
akuibpt23191的博客
07-13 721
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
【快应用】addEventListener()方法无法监听动画事件
Mayism123的博客
06-14 566
这是华为与联盟的底层实现差异导致的，华为是需要在动画效果触发前去调用监听方法才能拿到回调结果。而在onshow中调用时，动画效果已经触发，是无法监听到的。如果要获取callback结果，必须先调用addEventListener，然后再动态修改class，触发CSS动画样式效果。Style中设置动画样式，然后在onshow生命周期中调用addEventListener()方法去监听动画事件，无法监听到，该方法无任何回调返回。
针对animationend和transitionend多次执行的问题解决方案
weixin_43118811的博客
12-14 1111
** 针对animationend和transitionend多次执行的问题解决方案 ** 对于animationend事件来说的话，如果我们在外层添加这个事件监听，如果监听元素里面还有动画，则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做： if(e.target === this) { console.log('end'); } 或者 if(e.targ...
javascript推断css3动画结束 css3动画结束的回调函数_.docx
10-09
接下来，我们可以使用这个函数获取正确的事件名，并添加事件监听器，当CSS3动画结束时触发回调函数： ```javascript var transitionEvent = whichTransitionEvent(); e.addEventListener(transitionEvent, function...
css3扑克牌展开折叠动画特效
06-11
5. **JavaScript事件监听**：为了实现点击触发动画的效果，我们需要在JavaScript中添加事件监听器，如`addEventListener('click', function() {...})`，并在回调函数中执行相应的动画逻辑。 6. **DOM操作**：通过...
精选资源
CSS3 SVG表白鲜花动画特效
06-24
在这个案例中，我们主要使用CSS3来实现动画效果，因为CSS3动画更易于理解和维护，且与浏览器的兼容性更好。通过在SVG元素上应用`@keyframes`规则，可以定义花朵从闭合到开放的各个阶段，并设置动画的持续时间、延迟...
原生JS检测CSS3动画是否结束的方法详解
10-17
同时，通过之前定义的getTransitions函数获取到正确的过渡事件名称，并给div元素添加了一个事件监听器，当过渡事件触发时，执行回调函数，其中包含了动画结束后的操作，例如弹出警告框，并移除触发动画的CSS类。...
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 4350
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
通过webkitAnimationEnd实现轮播动画
时光清浅处，一步一安然
08-09 685
我们也常常通过它来实现大部分轮播动画，但有时候项目比较简单，以及一些版本的问题，我们可以尝试一些其他简单的手段来实现轮播。那我们在实现轮播逻辑时，可以利用CSS3的动画属性结合其监听来实现。事情，打印出“执行完一次animation”的字样。在WebKit引擎的浏览器中，当CSS3的。事件，监听重复运动事件，每执行完一次。'执行完一次animation'相对应，一个是开始，一个是结束。说到轮播动画，大家应该都知道。在以下示例中，当执行完一次。动画执行结束时，会触发。动画，控制台就会触发。......
事件addEventListener（）参数及事件汇总
qq_46344419的博客
04-23 6694
addEventListener（）参数及事件汇总
animationend和transitionend多次执行的问题解决方案
羽筠的博客
09-18 4074
对于animationend事件来说的话，如果我们在外层添加这个事件监听，如果监听元素里面还有动画，则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做： $('.ele').on('animationend webkitAnimationEnd',function(e){     if(e.target === this) {         console.log(...
html5监听动画结束,分享一个监听css3动画（animation）结束事件实例
weixin_39812142的博客
06-05 801
当css3的animation完成一个动画，我们想让动画保持在终止的状态或其他一些事件，要怎么做呢？我们可以监听 webkitAnimationEnd 事件就可以// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() {console.log("动画结束");})-webkit-animation动画有三个事件：开始事件: web...
html5监听动画结束,css3动画是否结束监听事件
weixin_42510567的博客
06-05 331
css3动画是否结束监听事件：var domObj = $(“#id”);domObj [0].addEventListener(“webkitAnimationEnd”, function(){this.className = this.className.replace(‘change’, ‘ ‘);alert(“动画结束”);});也可以将function单独拿出来：domObj [0].a...
属性动画的监听器（取消监听器）
weixin_42145792的博客
10-11 811
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.youkuaiyun.com/pengbo6665631/article/details/99459544 前言 动画分为好几类，逐帧动画和补间动画就不说了，重点看一下属性动画吧 ViewPropertyAnimator // 使用方法 view.animate(...
animate动画开始（webkitAnimationStart）结束（webkitAnimationEnd）执行事件
小武的博客
09-18 599
html代码： <div id="animateId"></div> css代码： #animateId{ color: #fff; background-color: red; width: 400px; height: 400px; -webkit-animation: transform 3s 2 ease; } @-webkit-keyframes transform { 0%{ -webkit-tra
js 监听css3动画的执行,animation动画暂停
qq_40591925的博客
03-21 4550
uniapp里： CSS 动画播放时，会发生以下三个事件： animationstart -CSS 动画开始后触发 animationiteration -CSS 动画重复播放时触发 animationend -CSS 动画完成后触发 @animationstart='animationstart' @animationiteration='animationiteration' @animationend ='animationend' 其他方式： var c...
点击放大视图的CSS3全屏动画效果
- 使用requestAnimationFrame方法来优化动画执行，该方法能够在浏览器重新绘制之前调用函数，以最优的方式呈现动画效果。 8. 文件压缩与性能： - 该压缩包文件中可能包含了HTML、CSS、JavaScript等文件的压缩版本...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值