css3动画结束监听 |淘宝导航 css在线

// 为元素添加CSS3动画
.box {
animation: my-animation 1s;
}
// 监听CSS3动画结束事件
const box = document.querySelector('.box');
box.addEventListener('animationend', function() {
console.log('动画结束了');
// 在这里处理后续操作
});

在上面的代码中，大家首先给元素添加了一个名为my-animation的CSS3动画，然后通过querySelector方法选中该元素，接着调用addEventListener方法来监听animationend事件。当动画结束后，函数中的代码就会被执行。

需要注意的是，如果元素上有多个CSS3动画，animationend事件会在所有动画结束后触发。如果只想在特定一个动画结束后触发事件，可以使用animation-name属性指定动画名称。

// 为元素添加多个CSS3动画
.box {
animation: my-animation1 1s, my-animation2 2s;
}
// 监听特定CSS3动画的结束事件
const box = document.querySelector('.box');
box.addEventListener('animationend', function(event) {
if (event.animationName === 'my-animation1') {
console.log('my-animation1结束');
// 处理my-animation1结束后的操作
} else if (event.animationName === 'my-animation2') {
console.log('my-animation2结束');
// 处理my-animation2结束后的操作
}
});

在上面的代码中，大家为元素添加了my-animation1和my-animation2两个CSS3动画，并通过animationName属性来判断动画的名称，从而执行不同的操作。

利用CSS3动画结束事件，大家可以更加方便地控制前端页面中元素的动画效果，优化用户体验和提高交互性。