transition必须写在默认状态而非:hover中，仅对可动画属性（如opacity、transform）生效，需指定duration单位，js动态加class时需强制重排触发动画。
过渡效果写不出来，八成是 transition 没放对地方，或者用了不能动的属性——比如 display、font-size、height: auto，这些写了也白写。
transition 必须写在默认状态里，不是 :hover 里
鼠标一移上去动画正常，一移开就“啪”地跳回原样？这是最典型的错误：把 transition 只塞进了 :hover 选择器。
-
transition是控制“变化过程”的规则，它得全程生效，才能管住进和出两个方向 - 正确位置是基础类（比如
.btn或button）的样式块里 - 如果只写在
:hover中，移出时浏览器直接丢掉这条规则，自然没退出动画
只对可动画化属性用 transition，别碰 display 和 height:auto
transition 不是万能胶，它只认那些能“插值计算”的属性。浏览器看到不支持的属性，会静默忽略，你根本看不到任何反应。
- 安全可用：
opacity、transform（缩放/位移/旋转）、background-color、color - 能动但慎用：
width、height、margin、padding——改它们会触发重排，卡顿明显 - 绝对无效：
display、z-index、font-size、height: auto、max-height: auto - 需要展开收起？用
max-height，且必须设具体数值，比如max-height: 0→max-height: 200px
transition-duration 是必需项，缺了等于没写
很多人复制代码时漏掉时间单位，或者写成 transition: background-color ease;——这行代码完全无效，因为没指定时长，浏览器按默认 0s 处理。
- 时间必须带单位：
0.25s或300ms，不能只写0.25 - 微交互（按钮悬停、开关切换）建议用
0.15s–0.25s，人眼感知最舒服 - 避免
transition: all 0.3s：它会偷偷监听所有变化，包括box-shadow每次重绘，反而拖慢渲染 - 多个属性不同步？分开写：
transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
JS 动态加 class 时 transition 失效？先强制重排
用 JS 给元素加类后动画一闪而过，或压根不动——大概率是浏览器把 DOM 更新和样式变更合并成一次渲染，没机会捕捉“初始态”。
- 解决方法很简单：在加类后、触发动画前，读一次布局属性，比如
void element.offsetHeight - 这句看似无用的读取会强制浏览器同步计算当前样式，为后续 transition 提供明确起点
- 尤其在表格行插入、列表动态渲染等场景下，这个小操作几乎必加
- 如果父容器用了
will-change: transform，记得配contain: layout paint，否则 iOS Safari 可能截断子元素动画
真正难的不是写几行 transition，而是记住哪些属性能动、哪些不能动，以及“动”的前提是两端都有明确值——比如 transform: scale(1) 和 scale(1.05)，中间不能有一端是 none 或未声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
