transitionend事件用于监听CSS过渡结束，可在动画完成后执行操作。通过JavaScript绑定该事件可实现回调，如移除元素或触发新动画。当多个属性同时过渡时，事件可能多次触发，需通过e.propertyName判断具体属性以避免重复执行。常用于链式动画或类切换后的清理工作，如淡出后隐藏元素。现代浏览器支持良好，但若过渡未开始或元素被提前移除，事件可能不触发，必要时可用getBoundingClientRect()强制重排确保样式更新。合理使用transitionend能提升动画与逻辑的衔接流畅性。
在CSS过渡中，transitionend 事件用于监听元素的过渡动画何时结束。这个事件非常实用，尤其当你需要在动画完成后执行某些操作，比如移除元素、触发下一个动画或更新状态时。
transitionend 事件基本用法
当一个CSS transition完成时，会触发 transitionend 事件。你可以通过JavaScript为元素绑定该事件：
const element = document.querySelector('.box');
element.addEventListener('transitionend', function(e) {
console.log('过渡结束');
// 可在此执行后续操作
});
注意：事件只在过渡完全结束后触发一次。如果设置了多个属性过渡（如 width 和 height），默认每个属性结束都会触发一次事件。
避免多次触发的处理技巧
由于一个元素可能同时对多个CSS属性做过渡，transitionend 可能被触发多次。可以通过判断 e.propertyName 来确认是哪个属性结束：
立即学习“前端免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
element.addEventListener('transitionend', function(e) {
if (e.propertyName === 'opacity') {
console.log('透明度过渡完成');
// 执行特定逻辑
}
});
这样可以确保只在目标属性过渡结束后才执行回调，避免重复操作。
与 JavaScript 动画流程结合使用
transitionend 常用于链式动画或动态类切换后的清理工作。例如：
// 添加过渡类
element.classList.add('fade-out');
element.addEventListener('transitionend', function() {
element.style.display = 'none'; // 动画后隐藏
element.classList.remove('fade-out'); // 清理类名
});
这种模式适合实现淡出后隐藏元素、滑动收起后删除节点等交互场景。
兼容性与注意事项
transitionend 在现代浏览器中支持良好。但需注意：
- 如果过渡未开始（如属性未变化），事件不会触发
- 元素被突然从DOM移除，transitionend 可能不会执行
- 使用 getBoundingClientRect() 等强制重排操作可确保样式刷新，避免过渡不触发
基本上就这些。合理利用 transitionend 能让动画和逻辑衔接更自然。
