transitionend事件
时间: 2023-05-24 17:07:12 浏览: 120
transitionend事件是在CSS过渡完成后触发的事件。它可以用于检测CSS过渡的结束,并在过渡结束后执行相应的JavaScript代码。
当元素的CSS属性经过过渡效果之后,就会触发transitionend事件。该事件可以用来执行一些操作,比如添加或删除CSS类、改变元素的样式等。在JavaScript中,可以通过addEventListener()方法来绑定transitionend事件,并在回调函数中处理相应的逻辑。
下面是一个示例代码,演示了如何使用transitionend事件:
```html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out;
}
.box.active {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var box = document.querySelector('.box');
box.addEventListener('transitionend', function() {
console.log('Transition ended!');
//处理代码
});
box.classList.add('active');
</script>
</body>
</html>
```
在上述代码中,我们先定义了一个CSS过渡,使.box元素的宽度由100px变为200px。然后在JavaScript中,通过querySelector()方法获取.box元素,并使用addEventListener()方法绑定transitionend事件。在回调函数中,添加了一个输出语句用于测试。最后,我们通过classList.add()方法添加了.active类,触发了CSS过渡效果。当过渡结束后,transitionend事件就会触发,并执行回调函数中的代码。