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

最新推荐文章于 2025-04-09 14:15:04 发布

小辰代写

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量1.6k

点赞数 20

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47040861/article/details/135783583

版权

本文详细介绍了JavaScript中的六个动画相关事件：animationstart、animationend、animationiteration、transitionstart、transitionend和transitioncancel，展示了如何在这些事件触发时执行相应的操作，以控制和监听CSS动画及过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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事件的回调函数中执行适当的操作，比如回滚到初始状态、修改元素的样式等。这样可以在过渡被中止时执行相应的操作，实现更灵活和可控的效果。