要让transition后元素停留在结束态，必须确保目标CSS属性在当前选择器中稳定声明，而非仅依赖:hover或临时class；transition-property: all隐患多，应明确指定可过渡属性；负delay是跳过前段延迟而非倒放；transitionend不触发常因属性未真实变化或被中断。
transition结束后元素样式“弹回去”了怎么办
过渡动画播完立刻回到原始状态，不是bug，是CSS默认行为——transition只管“怎么变”，不管“变完停在哪”。要让元素停留在结束态，得靠最终生效的CSS属性值本身，而不是靠动画过程“撑住”。
常见错误现象：hover触发transition，鼠标移开后样式瞬间回退；JS动态加class触发动画，class移除后状态丢失。
- 必须确保动画结束时，目标CSS属性（比如
transform、opacity）在当前选择器中是**稳定声明**的，不能只靠:hover或临时class提供 - 避免只在
:hover里写transform: scale(1.2)却不给常态设transform: scale(1)——浏览器会回退到未声明值（通常是none） - JS控制时，别只用
element.classList.add('animate')，记得同步设置终态样式，或用element.style.transform = 'scale(1.2)'固化
transition-property设成all为什么经常失效
transition-property: all看似省事，实则隐患多：它只对“可过渡的属性”起效，且依赖前后声明值是否可插值。很多属性（如display、height从auto开始、font-weight用关键字）根本无法平滑过渡。
使用场景：快速原型调试可以暂用，上线前必须收口。
立即学习“前端免费学习笔记（深入）”；
-
display切换永远不触发过渡——它是个离散开关，改用visibility+opacity组合 -
height: auto无法过渡，需明确设具体数值（如height: 0→height: 200px），或改用max-height过渡 -
background简写可能隐含不可过渡值（如background: url(...) center / cover），拆成background-color和background-image分别处理
transition-delay为负值的实际效果是什么
负的transition-delay不是“倒放动画”，而是让过渡**立即开始，并跳过前N毫秒的延迟阶段**。比如transition-delay: -0.3s，相当于动画从第300ms处切入播放，开头那段直接被裁掉。
典型用途：多个元素错峰入场时，让后启动的元素“追上”节奏，而非傻等。
- 仅对已存在且样式已计算的元素有效；新插入DOM的元素设负delay，可能因样式未就绪而表现异常
- 和
transition-duration配合要小心：若delay绝对值 ≥duration，动画可能完全不可见（例如duration: 0.2s; delay: -0.5s） - 调试时可用
transition-timing-function: steps(1, start)辅助观察起始帧
JS监听transitionend事件为何有时不触发
根本原因：浏览器只对**实际发生了变化的可过渡属性**派发transitionend。如果过渡前后计算值相同（比如opacity从1→1）、属性不可过渡、或过渡被中途取消（class快速增删），事件就不会来。
兼容性注意：Firefox对transitionend的propertyName字段返回带前缀名（如-moz-transform），Chrome/Safari返回标准名（transform）。
- 务必检查
event.propertyName是否匹配你关心的属性，不要只监听事件本身 - 避免在同一个元素上频繁切换class导致过渡被中断——可加防抖，或用
getComputedStyle确认当前值再决定是否触发 - 动画中途被
display: none或visibility: hidden打断时，事件大概率丢失，改用setTimeout兜底更稳妥
最易被忽略的点：过渡是否生效，最终取决于“计算样式是否真变了”，而不是class有没有加上、或者transition属性有没有写。打开DevTools的Computed面板，盯着目标属性的实时值看两眼，比查十遍文档都管用。
