transition对display无效，因display是离散属性无法插值；应改用opacity与visibility组合控制显隐，并在动画结束后按需通过js设display:none。
transition 为什么没生效？检查 display 和 visibility
直接给 display: none 的元素加 transition 是无效的——CSS 过渡只在可计算的数值属性（如 opacity、transform、height）上起作用，而 display 是离散值，无法插值。常见错误是写完 transition: opacity 0.3s，却用 display: none 控制显隐。
解决方法是改用 opacity + visibility 组合：
-
visibility: hidden配合opacity: 0实现“视觉隐藏”，同时保留布局占位 - 过渡结束后，再通过 JS 或
transitionend事件切换display（如果真需要释放空间） - 避免仅靠
visibility: hidden过渡——它本身不可动画，必须搭配opacity或transform
Vue/React 中 v-if 和 v-show 的动画差异
v-if 是条件渲染，DOM 节点真正被移除/插入，无法直接过渡；v-show 只切 display，配合 CSS 类才能实现平滑效果。但注意：v-show 不会触发组件的 mounted/unmounted 生命周期，可能影响内部逻辑。
实操建议：
- 用
<transition></transition>包裹v-if元素时，必须配appear和对应 CSS 类（如.fade-enter-active），否则首次渲染无动画 - React 中类似场景推荐用
react-transition-group的CSSTransition，它会在 DOM 插入后才添加enter-active类，避免样式竞争 - 不要在
transition内部直接操作ref的style.display，这会绕过框架的过渡机制，导致类名不更新
height: auto 无法过渡？用 max-height 替代
想让一个折叠面板展开时有高度过渡，但设 height: auto 后 transition 完全失效——因为 auto 不是可计算数值，浏览器无法生成中间帧。
可行方案是用 max-height 模拟：
- 收起状态：设
max-height: 0+overflow: hidden - 展开状态：设足够大的
max-height（如max-height: 500px），确保内容能完全显示 - 缺点：需预估最大高度；若内容动态变高超出预设值，会出现裁剪。更健壮的做法是用 JS 测量真实
scrollHeight后设置max-height，再用transitionend清除内联样式
transform 和 opacity 是最安全的过渡属性
比起 width、height、margin 等触发布局重排（layout）的属性，transform 和 opacity 由合成层（compositor）处理，性能高且不会卡顿。尤其在移动端或低配设备上，这点非常关键。
典型组合写法：
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
注意事项：
- 避免同时过渡太多属性，尤其是涉及
left/top（会强制重排） - 用
cubic-bezier(0.4, 0, 0.2, 1)是 Vue 默认缓动函数，比ease更顺滑 - 如果组件含子元素阴影或模糊滤镜，过渡中可能闪烁——加
will-change: transform提前提示合成器，但别滥用，否则可能增加内存开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
