display属性不可过渡，浏览器不支持其动画；应改用opacity+visibility、max-height或transform+overflow等可过渡属性组合实现显隐效果。

display 属性本身不支持 transition

display 不是 CSS 中的可过渡属性，浏览器根本不会对它的变化做插值计算。哪怕你写了 transition: display 0.3s，也完全无效——CSS 规范里明确把 display 列为「non-animatable」（不可动画化）属性。

常见误用场景：想用 display + transition 实现显隐动画

比如点击按钮切换 display: none ↔ display: block，同时期望有淡入淡出或高度展开效果。这行不通，因为：

• display 变化是瞬间的，没有中间状态
• 一旦变成 none，元素脱离文档流，所有尺寸、透明度等样式都“失效”，transition 失去作用对象
• 即使搭配 opacity 或 height，若 display 先变为 none，后续过渡直接被中断

真正可行的替代方案

用支持过渡的属性组合模拟显隐行为，关键在于「保持元素在文档流中参与渲染」：

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

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

下载

• 用 opacity + visibility：先设 opacity: 0; visibility: hidden;，过渡 opacity，再用 visibility 控制是否响应交互（注意 visibility 本身不可过渡，但配合 opacity 能掩盖闪烁）
• 用 max-height 模拟高度过渡：给一个足够大的 max-height 值（如 max-height: 500px），从 0 过渡过去；需确保内容高度可预估，否则会卡顿或截断
• 用 transform: scaleY(0) + overflow: hidden：比 height 更可靠，无重排开销，且支持任意内容高度
• 如果必须用 display 控制存在性（比如 SSR 或 SEO 敏感场景），那就放弃 CSS 过渡，改用 JS 配合 getComputedStyle 和 requestAnimationFrame 手动控制

容易被忽略的细节

很多人试过 opacity 过渡但发现“没效果”，往往是因为：

• 忘了加 transition: opacity 0.3s，只写了 opacity 变化
• 元素初始 display: none，导致 opacity 根本没被解析（display: none 时所有样式计算都被跳过）
• 过渡触发时机不对：比如在 display 改为 block 的同一帧就改 opacity，浏览器来不及重绘，得用 setTimeout(() => {}, 0) 或 requestAnimationFrame 延迟到下一帧

最稳妥的做法是彻底绕开 display 参与过渡逻辑——它不是用来做动画的，而是用来做存在性控制的。混用两者，八成会掉坑里。

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