transition结束后元素跳回初始状态不是bug，而是因终态样式未被稳定声明；需通过持久class显式定义起始/终态值，并避免依赖:hover等临时状态。
过渡动画结束后元素跳回初始状态，不是 bug，是 CSS 的默认行为 —— transition 只控制“怎么变”，不负责“变完停在哪”。要保持终态，得靠终态样式本身被稳定声明，而不是靠动画“撑住”。
transition 结束后不保持终值的根本原因
浏览器在 transition 执行完毕后，会立刻回退到当前选择器中**未被 transition 覆盖的原始计算值**。如果终态样式只存在于临时 class（如 :hover 或 .is-active）里，而该 class 被移除或状态退出，对应属性就失去声明来源，自然回落到初始值（比如 transform: none、opacity: 1）。
- hover 触发的 transition：鼠标移开 → class 或伪类失效 → 终态样式消失 → 元素回退
- JS 动态加 class 后立刻 remove：动画甚至没开始，更谈不上保持
- 只在目标 class 中写
transform: translateX(100px)，但常态没设transform: none或其他基础值：浏览器会把未声明的 transform 当作none，但这个“none”不是显式声明，导致过渡前后缺乏可插值锚点
为什么 animation-fill-mode: forwards 对 transition 无效
animation-fill-mode 是 animation 模块的属性，和 transition 完全无关。它对 transition 不起任何作用，写了也白写。
- transition 没有关键帧、没有 fill-mode 概念，只有起始值 → 过渡过程 → 终止值（必须由 CSS 规则显式提供）
- 试图给 transition 加
animation-fill-mode: forwards属于用错模块，DevTools 里会直接忽略该声明 - 真正需要的是：确保终态属性在当前生效的选择器中**稳定存在且不被后续规则覆盖**
如何让 transition 后保持终态（实操要点）
核心逻辑只有一个：让终态样式“活下来”。不是靠动画机制，而是靠 CSS 层级与声明稳定性。
- 避免只依赖
:hover或一次性 class 控制终态；改用持久 class（如.is-open），JS 控制其增删，样式始终有效 - 在常态选择器中显式声明基础值，例如：
.box { transform: translateX(0); }+.box.is-moved { transform: translateX(100px); } - 不要在同一个 class 里既写
transition又写终态样式（如.box { transition: transform 0.3s; transform: translateX(100px); }），这会导致浏览器认为“无变化”，跳过过渡 - 慎用
transition-property: all：很多属性（display、height: auto、font-weight: bold）无法插值，会导致部分属性根本不动，终态看起来“没生效”
容易被忽略的兼容性与调试点
看似简单的保持逻辑，在真实项目里常因细节崩盘：
- 移动端 WebView（尤其旧版 Android）对
transform和opacity的终态读取有时序问题，建议在transitionend事件后用getComputedStyle(el).transform验证，而非仅信 DOM class - 父容器有
transform（如scale(0.95)）会创建新的变换上下文，子元素的终态transform是相对于该上下文计算的，可能视觉偏移 - 使用
will-change: transform可能提前触发合成层，但若终态样式未同步更新，反而造成渲染错位，上线前务必关掉测试对比
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
