transition必须写在初始状态元素上，而非:hover等目标状态；仅可计算且有中间值的属性（如opacity、transform）支持过渡，display等不可过渡；duration为0s仍触发重排，应移除声明或用none禁用。

transition该写在哪个元素上才生效

必须写在「初始状态所在的元素」上，不是写在 hover 或 class 切换的目标元素上。很多人把 transition 加在 :hover 伪类里，结果没效果——因为浏览器只在状态变化时查初始元素的过渡声明，而不是查新状态。

• ✅ 正确：给按钮加 transition: background-color 0.3s ease;，再用 :hover 改 background-color
• ❌ 错误：只在 button:hover { transition: background-color 0.3s ease; } 里写，初始状态无 transition，变化不平滑
• 注意：如果初始状态是 display: none，切到 display: block 不会触发 transition——display 是不可过渡属性

哪些 CSS 属性能用 transition 平滑变化

不是所有属性都支持过渡。只有「可计算、有中间值」的属性才行，比如颜色、尺寸、透明度；而像 display、z-index、font-family 这类离散型或无插值逻辑的属性，写了 transition 也白搭。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 可过渡： opacity、transform、background-color、width（需有明确单位，如 px/%）、box-shadow
• ❌ 不可过渡：display、visibility、position（值本身无渐变含义）、height（从 0 → auto 无效，auto 无法计算中间值）
• ⚠️ 性能提示：优先用 transform 和 opacity，它们走 GPU 合成层，比改 width 或 top 流畅得多

transition-duration 写 0s 还会触发重排吗

会。哪怕 transition-duration: 0s，只要声明了 transition，浏览器仍会启用过渡引擎，可能引发不必要的 layout 计算，尤其在频繁操作的场景下（如滚动中 toggle class）。

• ✅ 纯切换无动画：直接删掉整个 transition 声明，别留 0s
• ✅ 想保留 JS 控制权：用 transition: none 临时禁用，比设 0s 更干净
• ⚠️ 注意：CSS 自定义属性（--my-color）不能直接被 transition 监听，得通过 color: var(--my-color) 这种方式间接使用，且仅当被过渡的属性本身可动画时才有效

transition-timing-function 的常见误用

cubic-bezier() 和预设关键字（ease、linear）影响的是「变化节奏」，不是「是否动」。很多人以为 ease-in-out 能让动画更「自然」，结果在快速交互中反而显得拖沓。

• ✅ 快速反馈（如按钮点击）：用 ease-out 或 cubic-bezier(0.2, 0.8, 0.4, 1)，起始快、收尾稳
• ✅ 弹出/收起类动效：避免纯 ease，它中间速度最快，容易感觉“冲”；推荐 ease-in-out 或自定义缓动
• ⚠️ 兼容性坑：IE10+ 才支持 cubic-bezier() 多参数写法，老项目慎用四参数版本

过渡真正难的不是写法，而是判断「这个变化值是否稳定可插值」以及「浏览器会不会悄悄把它降级成 layout 触发器」。很多卡顿问题，根源不在 timing-function，而在你动了 height 却没意识到它正反复重排。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！