本文介绍如何通过 css 关键帧动画（`@keyframes`）与 `animation-fill-mode: forwards` 彻底规避因 dom 嵌套导致的 `transitionend` 事件冒泡/误触发问题，无需 javascript 监听或 `settimeout` 妥协方案。
在实际开发中，当一个可交互的子元素（如 .toggle）嵌套在带有 CSS 过渡效果的父容器（如 .a）内部时，直接监听 transitionend 事件极易引发意外行为——尤其是点击子元素触发父级样式变更后，transitionend 可能被错误捕获、重复绑定，甚至因事件冒泡导致提前隐藏或状态错乱。你提供的示例正是典型场景：.toggle 在 .a 内部，hover 触发颜色过渡，而点击时移除 .visible 类会触发动画，但 transitionend 却可能被子元素自身过渡（如 color）意外触发，造成 a.style.display = 'none' 提前执行。
根本解法：弃用 transition + transitionend，改用 animation + forwards
CSS 动画天然具备明确的起止状态和可控的填充模式，且 animationend 事件仅在动画完成时触发一次，不会因子元素的其他过渡属性（如 color）而误触发。更重要的是，animation-fill-mode: forwards 能确保动画结束后，元素永久保持 @keyframes 中 to 状态的样式，无需 JS 手动维护显示逻辑。
以下是优化后的完整实现：
立即学习“前端免费学习笔记（深入）”；
.a {
display: grid;
font: 2rem sans-serif;
place-content: center;
position: relative;
width: 200px;
height: 200px;
background: red;
left: 200px; /* 初始位置：右侧 */
opacity: 0; /* 初始透明，避免闪现 */
animation: slideIn 0.3s ease-in-out forwards;
}
.toggle {
transition: color 0.2s;
}
.toggle:hover {
color: #fff;
}
@keyframes slideIn {
from {
left: 200px;
opacity: 0;
}
to {
left: 0; /* 终态位置：左侧 */
opacity: 1; /* 终态可见 */
}
}<div class="a"> <div class="toggle">toggle</div> </div>
✅ 优势总结：
- 零 JS 动画控制：初始显示由 CSS 自动完成，无 setTimeout 或 classList.add() 时序风险；
- 事件纯净：若需在动画结束时执行逻辑（如清理、上报），可监听 animationend，它只响应 .a 的 slideIn 动画，不受 .toggle:hover 干扰；
- 状态稳定：forwards 确保动画后 left: 0; opacity: 1 持久生效，无需手动设 display: block；
- 可逆性强：如需“关闭”动画，只需添加 .a.hidden { animation: slideOut 0.3s ease-in-out forwards; } 并切换类名即可。
⚠️ 注意事项：
- 若需动态触发动画（如点击切换），应通过添加/移除动画类实现（如 a.classList.toggle('animate-in')），而非直接操作 style.animation，以确保重播兼容性；
- animationend 事件对象的 e.animationName 字段可用于区分多个动画，进一步提升健壮性；
- 避免在同一个元素上混用 transition 和 animation 控制同一属性（如同时对 left 使用两者），可能导致行为不可预测。
综上，面对嵌套结构下的过渡事件污染问题，拥抱声明式 CSS 动画不仅是更简洁的解法，更是更可靠、更可维护的现代实践。
