transitionend 事件（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，CSS 过渡（CSS Transitions）已成为实现平滑视觉效果的核心工具。无论是按钮悬停动画、页面元素的滑动效果，还是复杂交互的视觉反馈，过渡效果都能显著提升用户体验。然而，开发者常常会遇到这样一个问题：如何在 CSS 过渡 完成 时执行特定逻辑？例如，当一个元素的宽度从 100px 平滑过渡到 200px 后，如何触发一个 JavaScript 函数？此时，transitionend 事件 就派上了用场。

本文将从基础概念出发，通过案例和代码示例，深入解析 transitionend 事件 的工作原理、使用场景及最佳实践。无论是编程初学者还是中级开发者，都能通过本文掌握这一工具，并将其灵活应用于实际项目中。

什么是 transitionend 事件？

transitionend 是一个由浏览器触发的 原生事件，当 CSS 过渡动画 完全结束 时，它会向目标元素发送信号。这个事件的核心作用是：在动画完成的瞬间，通知开发者执行后续操作。

形象比喻：过渡动画的“终点哨声”

可以把 CSS 过渡想象成一场马拉松比赛。假设一个元素的宽度需要从 100px 过渡到 200px，这个过程就像选手从起点跑到终点。transitionend 事件 就如同终点线处的哨声——当选手（动画）抵达终点（过渡完成）时，哨声（事件）响起，裁判（开发者）可以立即开始计时或宣布结果（执行代码逻辑）。

transitionend 事件的核心特性

1. 触发条件

transitionend 事件的触发需满足以下条件：

• 元素上存在 有效的 CSS 过渡声明（例如 transition: width 0.5s ease）。
• 过渡属性的实际值 发生了变化（例如通过 JavaScript 修改 element.style.width）。
• 过渡过程 自然结束，而非被中断（例如未被 transition: none 或 transition-property: none 取消）。

示例代码：基础过渡与事件监听

<!-- HTML -->
<div id="box" class="transition-box"></div>

<!-- CSS -->
.transition-box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  transition: width 0.5s ease;
}

<!-- JavaScript -->
const box = document.getElementById('box');

// 监听 transitionend 事件
box.addEventListener('transitionend', (event) => {
  console.log('Transition completed!');
  // 在此处添加后续逻辑，例如隐藏元素或更新状态
});

// 触发过渡
box.style.width = '200px';

2. 事件对象的属性

当 transitionend 事件触发时，会传递一个 事件对象，包含以下关键属性：
| 属性名 | 说明 | |------------------|----------------------------------------------------------------------| | propertyName | 触发过渡的 CSS 属性名（例如 "width"）。 | | elapsedTime | 过渡从开始到结束的实际耗时（单位：秒）。 | | pseudoElement | 如果过渡作用于伪元素（如 ::before），则返回伪元素选择器。 |

示例：获取过渡属性和耗时

box.addEventListener('transitionend', (event) => {
  console.log(`属性 ${event.propertyName} 过渡完成，耗时 ${event.elapsedTime.toFixed(2)} 秒`);
});

实际案例：transitionend 的应用场景

案例 1：按钮点击后的状态反馈

假设一个按钮在点击后需要执行缩放动画，并在动画结束后显示提示信息。

<!-- HTML -->
<button id="myButton">点击我</button>

<!-- CSS -->
#myButton {
  padding: 10px 20px;
  transition: transform 0.3s;
}

#myButton:active {
  transform: scale(0.95);
}

<!-- JavaScript -->
document.getElementById('myButton').addEventListener('transitionend', (event) => {
  if (event.propertyName === 'transform') {
    alert('动画完成！');
  }
});

// 强制触发过渡（例如在特定逻辑后）
myButton.style.transform = 'scale(1.1)';

案例 2：轮播图的无缝切换

在轮播图中，当当前图片的透明度过渡结束时，可以立即切换到下一张图片，避免视觉卡顿。

// 假设轮播图元素为 carousel，当前索引为 currentSlide  
carousel.addEventListener('transitionend', (event) => {
  if (event.propertyName === 'opacity') {
    // 切换到下一张图片
    currentSlide = (currentSlide + 1) % slides.length;
    updateCarousel();
  }
});

注意事项与最佳实践

1. 浏览器兼容性

transitionend 事件在现代浏览器中广泛支持，但不同浏览器的事件名称可能不同：

• 标准名称：transitionend
• 浏览器前缀：
  • Chrome/Safari: webkitTransitionEnd
  • Firefox: transitionend（无前缀）

解决方案：通过标准化事件名称，或使用库（如 modernizr）检测支持情况。

// 标准化事件名称的写法
const transitionEndEvent = 
  window.WebkitTransitionEvent ? 'webkitTransitionEnd' : 'transitionend';

box.addEventListener(transitionEndEvent, handler);

2. 避免重复触发

如果过渡属性被多次修改，事件可能触发多次。例如：

box.style.width = '200px'; // 触发一次
box.style.height = '150px'; // 触发第二次

此时，需通过 propertyName 筛选需要处理的事件，或使用标志位避免重复操作。

3. 多元素管理

当监听多个元素的 transitionend 事件时，建议为每个元素绑定独立的事件处理函数，或通过 event.target 区分元素。

transitionend 与其他动画方式的对比

下表对比了 CSS 过渡、@keyframes 动画和 JavaScript 动画的特性，帮助开发者选择合适的技术：

结论

transitionend 事件 是连接 CSS 过渡与 JavaScript 逻辑的桥梁，它让开发者能够精准控制动画的完成时刻。无论是简单的状态反馈还是复杂的交互系统，掌握这一工具都能显著提升代码的优雅性和用户体验。

在实际开发中，建议遵循以下原则：

1. 明确事件触发条件，避免因过渡中断或属性未变化导致的错误。
2. 利用事件对象的属性（如 propertyName）筛选需要处理的逻辑，提升代码健壮性。
3. 结合浏览器兼容性策略，确保代码在不同环境下的稳定性。

通过合理使用 transitionend，开发者可以将视觉效果与功能逻辑无缝衔接，打造流畅且富有表现力的 Web 应用。