【JavaScript】事件监听：动画事件
目录
一、animationstart：当CSS动画开始播放时触发。
二、animationend：当CSS动画播放完成时触发。
三、animationiteration：当CSS动画重复播放时触发。
四、transitionstart：当CSS过渡开始时触发。
五、transitionend：当CSS过渡完成时触发。
六、transitioncancel：当CSS过渡被取消时触发。
JavaScript提供了一些动画相关的事件，可以用于控制和监听动画的执行过程。以下是一些常见的JavaScript动画事件：
一、animationstart：当CSS动画开始播放时触发。
动画事件animationstart在CSS动画开始播放时触发，它可以用于执行一些初始化操作或添加额外的效果。下面是一个简单的例子，演示了如何使用animationstart事件：
Animation Start Event Example
在上面的例子中，我们定义了一个名为slide-in的CSS动画，它使元素从左侧移动到右侧。当动画开始播放时，animationstart事件会被触发，回调函数会在控制台打印出一条消息"Animation started!"。
二、animationend：当CSS动画播放完成时触发。
动画事件animationend在CSS动画播放完成时触发，它可以用于在动画结束后执行一些操作或处理后续逻辑。下面是一个简单的例子，演示了如何使用animationend事件：
Animation End Event Example
在上面的例子中，我们定义了一个名为slide-in的CSS动画，它使元素从左侧移动到右侧。当动画播放完成时，animationend事件会被触发，回调函数会在控制台打印出一条消息"Animation ended!"。
使用时可以根据具体的需求，在animationend事件的回调函数中执行适当的操作，比如改变元素的样式、添加后续的动画效果等。这样可以在动画结束后进行一些操作，实现更丰富的交互或处理后续的逻辑。
三、animationiteration：当CSS动画重复播放时触发。
动画事件animationiteration在CSS动画每次重复播放时触发，它可以用于监听动画的循环并执行相应的操作。下面是一个简单的例子，演示了如何使用animationiteration事件：
Animation Iteration Event Example
在上面的例子中，我们定义了一个名为rotate的CSS动画，它使元素沿着中心点顺时针旋转360度。通过将infinite作为动画的animation-iteration-count属性值，使动画无限循环播放。每次动画循环时，animationiteration事件会被触发，回调函数会在控制台打印出一条消息"Animation iteration!"。
可以根据具体的需求，在animationiteration事件的回调函数中执行适当的操作，比如改变元素的样式、添加其他动画效果等。这样可以在动画每次循环时执行相应的操作，实现更灵活和动态的效果。
四、transitionstart：当CSS过渡开始时触发。
动画事件transitionstart在CSS过渡开始时触发，可以用于监听过渡的开始并执行相应的操作。下面是一个简单的例子，演示了如何使用transitionstart事件：
Transition Start Event Example
在上面的例子中，我们定义了一个元素.box，当它的宽度发生变化时会触发过渡效果。通过设置transition属性为width 2s，将宽度变化的过渡时间设置为2秒。当过渡开始时，transitionstart事件会被触发，回调函数会在控制台打印出一条消息"Transition started!"。
可以根据具体的需求，在transitionstart事件的回调函数中执行适当的操作，比如改变元素的样式、添加其他动画效果等。这样可以在过渡开始时执行相应的操作，实现更灵活和动态的效果。
五、transitionend：当CSS过渡完成时触发。
动画事件transitionend在CSS过渡结束时触发，可以用于监听过渡的完成并执行相应的操作。下面是一个简单的例子，演示了如何使用transitionend事件：
Transition End Event Example
在上面的例子中，我们定义了一个元素.box，当点击按钮时会改变其宽度。通过设置transition属性为width 2s，将宽度变化的过渡时间设置为2秒。当过渡结束时，transitionend事件会被触发，回调函数会在控制台打印出一条消息"Transition ended!"。
点击页面上的"Change Width"按钮，会触发changeWidth()函数，将.box元素的宽度从初始值100px变为200px。随后，过渡效果会开始，并在2秒后完成。当过渡结束时，transitionend事件会被触发，回调函数会在控制台打印出相应的消息。
可以根据具体的需求，在transitionend事件的回调函数中执行适当的操作，比如添加其他动画效果、切换元素的样式等。这样可以在过渡完成时执行相应的操作，实现更灵活和动态的效果。
六、transitioncancel：当CSS过渡被取消时触发。
动画事件transitioncancel在CSS过渡被取消时触发，可以用于监听过渡被中止的情况并执行相应的操作。下面是一个简单的例子：
Transition Cancel Event Example
在上面的例子中，我们定义了一个元素.box，并为其设置了一个宽度变化的过渡效果。通过设置transition属性为width 2s，将宽度变化的过渡时间设置为2秒。当调用startTransition()函数时，.box元素的宽度会从初始值100px变为200px，并且过渡效果会开始。
我们还定义了一个"Cancel Transition"按钮，点击该按钮会调用cancelTransition()函数。该函数会将.box元素的过渡效果取消，通过将transition属性设置为none，从而中止过渡。
当过渡被取消时，transitioncancel事件会被触发，回调函数会在控制台打印出一条消息"Transition cancelled!"。
可以根据具体的需求，在transitioncancel事件的回调函数中执行适当的操作，比如回滚到初始状态、修改元素的样式等。这样可以在过渡被中止时执行相应的操作，实现更灵活和可控的效果。