display和visibility不能过渡，因为二者均为离散属性，无中间状态，浏览器无法插值计算；height: auto同理，因非具体数值而无法参与过渡。
transition 为什么不能过渡 display 或 visibility
因为 display 和 visibility 不是「可插值（interpolatable）」的属性——它们没有中间状态，浏览器无法计算从 display: none 到 display: block 的任意中间值，也就无法生成逐帧动画。
CSS Values and Units Level 4 规范明确指出：只有「数值型」或「颜色型」等具备线性插值能力的属性才支持 transition。而 display 是离散枚举值（block、flex、grid…互不兼容），visibility 只有 visible/hidden/collapse 三种状态，无中间帧，所以过渡时直接跳变。
-
display: none→display: block：DOM 节点被销毁/重建，transition 完全不触发 -
visibility: hidden→visibility: visible：视觉上仍是“闪现”，因无 alpha 或 offset 类中间态 - 想模拟淡入/滑入？用
opacity+transform组合，二者都支持插值且能触发 GPU 加速
height: auto 为什么过渡不了
height: auto 本身不是具体数值，而是“由内容撑开”的计算逻辑，浏览器无法在动画帧中动态重排并插值——它不知道“50% 的 auto 高度”是多少像素。
哪怕你写了 transition: height 0.3s，只要起始或结束值之一是 auto，整个过渡就静默失效（不是报错，是直接跳变）。
- 替代方案一：用 JS 先读取
el.scrollHeight，设为固定height，再过渡；收起时先过渡到height: 0，再设overflow: hidden - 替代方案二：用
max-height（设一个足够大的安全上限，如max-height: 500px），配合overflow: hidden实现折叠/展开 - 替代方案三：用
transform: scaleY(0)→scaleY(1)，只动 transform，不触发布局，性能更稳
transition 写在 :hover 里为什么只单向生效
因为 transition 必须定义在「初始状态」中，而不是变化后的伪类里。如果只在 :hover 中写 transition: opacity 0.3s，那鼠标移入时会过渡，但移出时浏览器找不到过渡定义，直接回退到默认样式——这就是“进有动画、出没动画”的典型表现。
- 正确写法：
.box { opacity: 1; transition: opacity 0.3s; } .box:hover { opacity: 0.5; } - 错误写法：
.box { opacity: 1; } .box:hover { opacity: 0.5; transition: opacity 0.3s; }（移出无过渡） - 注意：
transition是简写属性，后声明会完全覆盖前声明，别在父子元素上重复写导致意外覆盖
如何快速验证 transition 是否真正生效
别只看眼动效果，用 DevTools 确认浏览器是否真把它当回事：
- 打开 Elements 面板 → 选中元素 → 切到 Styles 标签 → 检查
transition-property计算值是否为预期（比如不是none） - 勾选 Rendering 面板里的 “Paint flashing”，过渡中若没高亮，说明根本没触发重绘/合成
- 打开 Layers 面板，确认
transform或opacity变化是否提升为独立图层（绿色小图标）；没提升则大概率走 CPU 绘制，卡顿或掉帧 - 临时把
transition-duration改成2s，肉眼确认是否真有缓动——很多“无效”其实是时间太短或变化太小，人眼看不出来
display 或 height: auto 做动效，就得立刻转向 transform/opacity 思维，否则永远在调“为什么没动画”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
