JS如何监听动画结束

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量3.7k 收藏 9
点赞数 2
分类专栏： 前端 文章标签： javascript
原文链接：https://www.mk2048.com/blog/blog.php?id=h1kk1aba0cbb&title=JS%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%8A%A8%E7%94%BB%E7%BB%93%E6%9D%9F
版权

场景描述

在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于监听动画的结束，简单总结学习下。

CSS3动画监听事件

transitionEnd事件

transitionEnd事件会在CSS transition动画结束后触发。

动画结束后触发监听事件
<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .demo{
            margin:100px;
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
        }
        .demo:hover{
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="demo" class="demo">
        鼠标移入
    </div>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
    </script>
</body>
</html>
事件多次触发问题

当存在多个属性过渡变化时，结束时会多次触发transitionend事件。看个例子：
当过渡结束时，width和background-color都发生变化，会触发两次transionend事件

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
        }
        .w200{
            width: 200px;
            background-color: #fef;
        }
    </style>
</head>
<body>
    <div id="demo" class="demo" onmouseover="change()" onmouseout="change()">
    </div>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo w200': 'demo'
        }
    </script>
</body>
</html>
事件失效问题及解决方案

1、在transiton动画完成前设置display:none，事件不会触发。

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
        }
        .w200{
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="demo" class="demo" onmouseover="change()" onmouseout="change()">
    </div>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo w200': 'demo'
            // 500ms后设置display:none
            setTimeout(function (){
                element.style.display = 'none'
            },400)
        }
    </script>
</body>
</html>

2、当transition完成前移除transition一些属性时，事件也不会触发，例如：

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
        }
        .noTranstion{
            width:100px;
            height: 100px;
            background-color: #ddc;
        }
        .w200{
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="demo" class="demo" onmouseover="change()" onmouseout="change()">
    </div>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo w200': 'demo'
            setTimeout(function(){
                element.className = 'noTranstion'
            },400)
        }
    </script>
</body>
</html>

3、元素从display:none到block，不会有过渡，导致无法触发transitionend事件
例如：元素从display:none 到block opacity从0到1，无法触发过渡效果。

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        body{padding: 50px;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
            opacity:0;
            display: none;
        }
        .noTranstion{
            width:100px;
            height: 100px;
            background-color: #ddc;
        }
        .opt{
            display: block;
            opacity:1
        }

        .w200{
            width: 200px;
        }
        button{position: absolute;top: 200px;width: 100px;height: 40px;}
    </style>
</head>
<body>
    <div id="demo" class="demo" onmouseover="change()" onmouseout="change()">
    </div>
    <button onclick="change()">Click</button>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo opt': 'demo'
        }
    </script>
</body>
</html>

无法触发过渡效果原因：
元素从none到block，刚生成未能即时渲染，导致过渡失效。所以需要主动触发页面重绘，刷新DOM。页面重绘可以通过改变一些CSS属性来触发，例如：offsetTop、offsetLeft、offsetWidth、scrollTop等。
触发过渡效果解决方案：
1、通过定时器延迟渲染

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        body{padding: 50px;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
            opacity: 0;
            display: none;
        }
        .opt{
            display: block;
        }
        button{position: absolute;top: 200px;width: 100px;height: 40px;}
    </style>
</head>
<body>
    <div id="demo" class="demo">
    </div>
    <button id="button" onclick="change()">点击</button>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        var button = document.getElementById('button')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo opt': 'demo'
            if(element.className === 'demo'){
                        element.style.opacity = null
                    button.innerHTML = '点击'
            }else{
                setTimeout(function(){
                element.style.opacity = '1'
                button.innerHTML = '重置'
            },10)
            }
        }
    </script>
</body>
</html>

2、强制获取当前内联样式
通过window.getComputedStyle()方法返回应用样式后的元的所有CSS属性的值，并解析这些值可能包含的任何基本计算。也就是说返回的属性值是已计算后的值，即DOM元素的样式已经更新了。然后再改变对应属性值触发过渡效果。例如：

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        body{padding: 50px;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
            opacity: 0;
            display: none;
        }
        .opt{
            display: block;
        }
        button{position: absolute;top: 200px;width: 100px;height: 40px;}
    </style>
</head>
<body>
    <div id="demo" class="demo">
    </div>
    <button id="button" onclick="change()">点击</button>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        var button = document.getElementById('button')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo opt': 'demo'
            if(element.className === 'demo'){
                        element.style.opacity = null
                    button.innerHTML = '点击'
            }else{
                // setTimeout(function(){
                //     element.style.opacity = '1'
                //     button.innerHTML = '重置'
                // },10)
                window.getComputedStyle(element, null).opacity
                element.style.opacity = '1'
                button.innerHTML = '重置'
            }
        }
    </script>
</body>
</html>

3、触发重绘刷新DOM
通过clientWidth触发重绘，例如：

<!DOCTYPE html>
<html>
<head>
    <title>transtionend demo</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        body{padding: 50px;}
        .demo{
            width:100px;
            height: 100px;
            background-color: #ddc;
            transition: all 0.5s ease-out;
            opacity: 0;
            display: none;
        }
        .opt{
            display: block;
        }
        button{position: absolute;top: 200px;width: 100px;height: 40px;}
    </style>
</head>
<body>
    <div id="demo" class="demo">
    </div>
    <button id="button" onclick="change()">点击</button>
    <script type="text/javascript">
        var element = document.getElementById('demo')
        var button = document.getElementById('button')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
        function change() {
            element.className = element.className === 'demo' ? 'demo opt': 'demo'
            if(element.className === 'demo'){
                        element.style.opacity = null
                    button.innerHTML = '点击'
            }else{
                // setTimeout(function(){
                //     element.style.opacity = '1'
                //     button.innerHTML = '重置'
                // },10)
                // window.getComputedStyle(element, null).opacity
                element.clientWidth;
                element.style.opacity = '1'
                button.innerHTML = '重置'
            }
        }
    </script>
</body>
</html>
浏览器兼容性

移动端基本支持 android2.1 、webkit3.2
详见浏览器兼容性

animationEnd事件

与transitonend事件类似，详见

Zepto中animate结束回调实现

查看了下zepto动画模块的源代码，animate()方法在动画结束后触发回调也是通过transitionend、animationend事件来触发。
另外在一些低版本的Android手机可能无法触发transitionend事件，需要手动触发。

$.fx = {
    off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
    speeds: { _default: 400, fast: 200, slow: 600 },
    cssPrefix: prefix,
    transitionEnd: normalizeEvent('TransitionEnd'),
    animationEnd: normalizeEvent('AnimationEnd')
  }
// 手动触发事件
if (duration > 0){
      this.bind(endEvent, wrappedCallback)
      // transitionEnd is not always firing on older Android phones
      // so make sure it gets fired
      setTimeout(function(){
        if (fired) return
        wrappedCallback.call(that)
      }, ((duration   delay) * 1000)   25)
    }

参考链接

zepto动画模块源码
transitionend事件MDN
transtion属性详解MDN
transitionend事件详解
Window.getComputedStyle() 方法

会做饭的技术男
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js使用transitionend实现图片无缝轮播
qq_40637323的博客
09-12 1652
假设有四张图片，顺序为 1 2 1 2 ，每张图片宽度为1190px， 两个数字一样代表两张图片是一样的，只是一个轮回 一开始设置CSS代码 transform: translate3d(-2380px, 0px, 0px); 即一开始显示第三张图片。 然后添加js代码，设置num=-2380， 当点击向左按钮时，num每次增加1190px， num=num+119...
javascript判断css3动画结束 css3动画结束的回调函数
10-24
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束，主要是使用了javascript的回调函数，其思路是一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持，非常的简单实用，推荐给大家。
原生JS检测CSS3动画是否结束的方法详解
01-19
本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下： 不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义： 代码如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta
javascript 监听CSS3动画
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-20 1320
CSS3动画逐渐代替了 jQuery的动画方法，从以前的通过计时器频繁修改元素样式到现在的只需要修改CSS就能实现平滑的动画。 如果有一组动画队列，或者某些方法需要在CSS3动画结束后才执行。常用的方法都是根据CSS的动画时长，然后设置一个延时器(setTimeout)来做的。但这不是一个最科学的方式。本篇文章介绍 js监听 CSS3动画的事件。 CSS3实现动画分为trans...
js动画事件
枫叶在飘呀的博客
02-07 1351
js之动画事件 首先，动画事件主要包括以下三个animationstart，animationiteration和animationend事件，下面做简单分别介绍。 animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道animation主要有6个属性，分别来设置动画呈现出来哦的效果，这个在我的另一篇文章中有介绍，我这边简单展示一下。
js 监听css3动画的执行,animation动画暂停
qq_40591925的博客
03-21 4003
uniapp里： CSS 动画播放时，会发生以下三个事件： animationstart -CSS 动画开始后触发 animationiteration -CSS 动画重复播放时触发 animationend -CSS 动画完成后触发 @animationstart='animationstart' @animationiteration='animationiteration' @animationend ='animationend' 其他方式： var c...
监听动画结束的几种方式
qq_31587231的博客
04-15 1352
监听动画结束的几种方式 1.通过Animation手动添加关键帧； 2.通过Invoke方法传入方法名称和动画时长； 3.通过定时器来监听 4.通过代码绑定 using UnityEngine; public class Test : MonoBehaviour { #region --变量定义 private Animator animator; priva...
JavaScript 练手小技巧：animationend 事件及其应用小案例
九天翔龙的技术博客
06-13 2102
animationend 事件在 CSS 动画完成后触发。 CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 在这三个事件函数中，均可以使用 event.animationName 属性，判断是在执行哪个动画。 个人觉得animationend 事件用的多一点。 案例1：标签的隐现 <button type=.
js监听 css动画animate 结束
kilito_01的博客
04-20 492
js监听 css动画animate 结束
javascript 通用loading动画效果实例代码
12-03
//wraperid : 显示loding图片的容器元素//ms：表示loding图标显示的时长，毫秒//envent：表示出发事件的事件源对象，用于获得出发事件的对象//callback：表示动画结束后执行的回掉方法//stop（）方法表示在回掉方法...
PhaserSpine:用于加载 Spine 动画的 Phaser 插件
06-26
PhaserSpine 开始乐趣： npm install bower install gulp 在浏览器中转到： http://localhost:8080/
transition-events:用于将侦听器设置为 CSS Transition 动画结束或特定部分的 jQuery 插件
07-07
这个 jQuery 插件允许将侦听器设置为动画结束或特定部分。 插件需要 jQuery 1.8 或更高版本。 方法$.fn.transitionEnd为所有transitionend未来事件添加监听器。 方法$.fn.afterTransition在转换结束后只执行一次回...
vue2.x过渡(transition)与动画(animationend)
想搞全栈的前端
06-01 3444
transition Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 示例： <div id="demo"> <button v-on:click="show = !show"> Toggle </butto...
关于js事件冒泡之transitionend
qq_37067705的博客
05-01 2402
今天在写一个小页面的时候，为了让form组件好看一点，特意添加了border过渡效果，代码如下： 代码很简单，就是hover时，会有颜色过渡，其实这没有什么问题，但是这个dom的顶层dom也添加了transitionend事件，结果就悲剧了，多说无益，上图： html： js： 自己封装的js方法： 该方法原理：trigger('show')去掉.hide，然后opa
vue 组件过渡动画
weixin_43294560的博客
02-15 2330
搭配标签消失/出现(v-show、v-if)的淡入淡出效果 1、在要过渡的标签外层包裹 <transition name='x> xx </transition> (1) 在style中写: //设置淡出,以及淡出时间 .x-enter,.x-leave-to{ opacity:0; } .x-enter-to,.x-leave{ o...
js监听gif停止 libgif-js Gif 操作（开始，暂停，移动帧...) 功能强大
slqgenius的博客
10-13 2653
这件事的起因是因为一个需求，需要 监听 gif 完成然后跳转到登录页，百度了很多都没有找到类似的教程，在自己强大的搜索能力下，还是找到了，细节看下面。 github.com/buzzfeed/li… 框架地址，功能挺强大的，具体使用方法可以查看文档，因为工作原因，就不一一列出实列了，只贴实际使用的代码，如果有使用的问题的话，可以共同交流一下。 <template> <img ref="img"> </template> <script>...
JS学习47：transitionend 事件的折腾
wonder
11-14 3697
1、引子 如上，单击方块的运行结果应该是什么呢？在高级浏览器下测试的结果是：1、2，符合预期。 通常，dom元素上的事件名称，比如“onclick、onmousedown”是与事件监听的事件名称是一一对应的，只是省略了“on”。于是： 如上，ontransitionend 是监听 css3 中 transition 过渡结束的事件，相关链接可以阅读参考链接。实际运
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
jq监听动画结束
05-24
你可以使用jQuery中的`animationend`事件来监听CSS... // 动画结束后执行的代码 }); ``` 在上述代码中，`#my-element`是要执行动画的元素的ID。当动画结束时，会触发`animationend`事件，并执行事件处理函数中的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值