【JavaScript】事件监听:动画事件

发布时间:2024年01月23日

目录

一、animationstart:当CSS动画开始播放时触发。

二、animationend:当CSS动画播放完成时触发。

三、animationiteration:当CSS动画重复播放时触发。

四、transitionstart:当CSS过渡开始时触发。

五、transitionend:当CSS过渡完成时触发。

六、transitioncancel:当CSS过渡被取消时触发。


JavaScript提供了一些动画相关的事件,可以用于控制和监听动画的执行过程。以下是一些常见的JavaScript动画事件:

一、animationstart:当CSS动画开始播放时触发。

动画事件animationstart在CSS动画开始播放时触发,它可以用于执行一些初始化操作或添加额外的效果。下面是一个简单的例子,演示了如何使用animationstart事件:

<!DOCTYPE html>
<html>
<head>
  <title>Animation Start Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      animation: slide-in 2s;
    }

    @keyframes slide-in {
      0% {
        left: -100px;
      }
      100% {
        left: 200px;
      }
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('animationstart', function() {
      // 在动画开始时执行的操作
      console.log('Animation started!');
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在上面的例子中,我们定义了一个名为slide-in的CSS动画,它使元素从左侧移动到右侧。当动画开始播放时,animationstart事件会被触发,回调函数会在控制台打印出一条消息"Animation started!"。

二、animationend:当CSS动画播放完成时触发。

动画事件animationend在CSS动画播放完成时触发,它可以用于在动画结束后执行一些操作或处理后续逻辑。下面是一个简单的例子,演示了如何使用animationend事件:

<!DOCTYPE html>
<html>
<head>
  <title>Animation End Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      animation: slide-in 2s;
    }

    @keyframes slide-in {
      0% {
        left: -100px;
      }
      100% {
        left: 200px;
      }
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('animationend', function() {
      // 在动画结束时执行的操作
      console.log('Animation ended!');
      // 可以在这里添加后续的逻辑处理
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在上面的例子中,我们定义了一个名为slide-in的CSS动画,它使元素从左侧移动到右侧。当动画播放完成时,animationend事件会被触发,回调函数会在控制台打印出一条消息"Animation ended!"。

使用时可以根据具体的需求,在animationend事件的回调函数中执行适当的操作,比如改变元素的样式、添加后续的动画效果等。这样可以在动画结束后进行一些操作,实现更丰富的交互或处理后续的逻辑。

三、animationiteration:当CSS动画重复播放时触发。

动画事件animationiteration在CSS动画每次重复播放时触发,它可以用于监听动画的循环并执行相应的操作。下面是一个简单的例子,演示了如何使用animationiteration事件:

<!DOCTYPE html>
<html>
<head>
  <title>Animation Iteration Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;
      animation: rotate 2s infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('animationiteration', function() {
      // 在动画每次循环时执行的操作
      console.log('Animation iteration!');
      // 可以在这里添加相应的操作或逻辑
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在上面的例子中,我们定义了一个名为rotate的CSS动画,它使元素沿着中心点顺时针旋转360度。通过将infinite作为动画的animation-iteration-count属性值,使动画无限循环播放。每次动画循环时,animationiteration事件会被触发,回调函数会在控制台打印出一条消息"Animation iteration!"。

可以根据具体的需求,在animationiteration事件的回调函数中执行适当的操作,比如改变元素的样式、添加其他动画效果等。这样可以在动画每次循环时执行相应的操作,实现更灵活和动态的效果。

四、transitionstart:当CSS过渡开始时触发。

动画事件transitionstart在CSS过渡开始时触发,可以用于监听过渡的开始并执行相应的操作。下面是一个简单的例子,演示了如何使用transitionstart事件:

<!DOCTYPE html>
<html>
<head>
  <title>Transition Start Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 2s;
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('transitionstart', function() {
      // 过渡开始时执行的操作
      console.log('Transition started!');
      // 可以在这里添加相应的操作或逻辑
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在上面的例子中,我们定义了一个元素.box,当它的宽度发生变化时会触发过渡效果。通过设置transition属性为width 2s,将宽度变化的过渡时间设置为2秒。当过渡开始时,transitionstart事件会被触发,回调函数会在控制台打印出一条消息"Transition started!"。

可以根据具体的需求,在transitionstart事件的回调函数中执行适当的操作,比如改变元素的样式、添加其他动画效果等。这样可以在过渡开始时执行相应的操作,实现更灵活和动态的效果。

五、transitionend:当CSS过渡完成时触发。

动画事件transitionend在CSS过渡结束时触发,可以用于监听过渡的完成并执行相应的操作。下面是一个简单的例子,演示了如何使用transitionend事件:

<!DOCTYPE html>
<html>
<head>
  <title>Transition End Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 2s;
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('transitionend', function() {
      // 过渡结束时执行的操作
      console.log('Transition ended!');
      // 可以在这里添加相应的操作或逻辑
    });

    function changeWidth() {
      box.style.width = '200px';
    }
  </script>
</head>
<body>
  <div class="box"></div>
  <button onclick="changeWidth()">Change Width</button>
</body>
</html>

在上面的例子中,我们定义了一个元素.box,当点击按钮时会改变其宽度。通过设置transition属性为width 2s,将宽度变化的过渡时间设置为2秒。当过渡结束时,transitionend事件会被触发,回调函数会在控制台打印出一条消息"Transition ended!"。

点击页面上的"Change Width"按钮,会触发changeWidth()函数,将.box元素的宽度从初始值100px变为200px。随后,过渡效果会开始,并在2秒后完成。当过渡结束时,transitionend事件会被触发,回调函数会在控制台打印出相应的消息。

可以根据具体的需求,在transitionend事件的回调函数中执行适当的操作,比如添加其他动画效果、切换元素的样式等。这样可以在过渡完成时执行相应的操作,实现更灵活和动态的效果。

六、transitioncancel:当CSS过渡被取消时触发。

动画事件transitioncancel在CSS过渡被取消时触发,可以用于监听过渡被中止的情况并执行相应的操作。下面是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
  <title>Transition Cancel Event Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 2s;
    }
  </style>
  <script>
    var box = document.querySelector('.box');

    box.addEventListener('transitioncancel', function() {
      // 过渡被取消时执行的操作
      console.log('Transition cancelled!');
      // 可以在这里添加相应的操作或逻辑
    });

    function cancelTransition() {
      box.style.transition = 'none';
    }

    function startTransition() {
      box.style.transition = 'width 2s';
      box.style.width = '200px';
    }
  </script>
</head>
<body>
  <div class="box"></div>
  <button onclick="cancelTransition()">Cancel Transition</button>
  <button onclick="startTransition()">Start Transition</button>
</body>
</html>

在上面的例子中,我们定义了一个元素.box,并为其设置了一个宽度变化的过渡效果。通过设置transition属性为width 2s,将宽度变化的过渡时间设置为2秒。当调用startTransition()函数时,.box元素的宽度会从初始值100px变为200px,并且过渡效果会开始。

我们还定义了一个"Cancel Transition"按钮,点击该按钮会调用cancelTransition()函数。该函数会将.box元素的过渡效果取消,通过将transition属性设置为none,从而中止过渡。

当过渡被取消时,transitioncancel事件会被触发,回调函数会在控制台打印出一条消息"Transition cancelled!"。

可以根据具体的需求,在transitioncancel事件的回调函数中执行适当的操作,比如回滚到初始状态、修改元素的样式等。这样可以在过渡被中止时执行相应的操作,实现更灵活和可控的效果。

文章来源:https://blog.csdn.net/weixin_47040861/article/details/135783583
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。