JavaScript动画事件

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