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