display 不支持 transition，因其为离散属性无中间状态；应改用 opacity 与 visibility 协同控制，并在 transitionend 后按需设 display: none 和 aria-hidden。

display 不支持 transition，不是写法错了，是浏览器压根不处理——你写的 transition: display 0.3s 会被静默丢弃，DevTools 的 Computed 面板里根本搜不到这条规则。

为什么 display 完全无法过渡

因为 display 是离散属性：取值只有 none、block、flex 等枚举值，没有中间状态可插值。浏览器无法计算“50% 显示”或“0.3 个 block”这种值，所以过渡引擎直接跳过它。这不是卡顿，是逻辑上不参与动画流程。

opacity + visibility 必须协同声明

单靠 opacity 不行（元素仍挡点击），只改 visibility 也不行（没渐变）。二者必须同时控制，且 transition 声明必须显式包含两者：

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

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

下载

• 初始态写成：opacity: 0; visibility: hidden;
• 过渡声明不能省略任一属性：transition: opacity 0.25s ease, visibility 0s 0.25s;（visibility 延迟到 opacity 动画结束才切换）
• 显示态必须同步设 opacity: 1 和 visibility: visible，否则焦点/点击行为异常
• 别用 transition: all —— 它不会自动包含 visibility，必须手写

动画结束后要不要真设 display: none

取决于是否需要释放布局空间或满足可访问性要求：

• 如果只是视觉淡入淡出（如下拉菜单收起），visibility + opacity 已足够，不用碰 display
• 如果内容庞大（如整页弹窗）、父容器有 overflow: hidden、或需屏幕阅读器跳过，就必须监听 transitionend 事件，且只在 event.propertyName === 'opacity' 时执行：el.style.display = 'none' 和 el.setAttribute('aria-hidden', 'true')
• 别忘了移除 tabindex 或主动 blur()，否则键盘用户可能卡在不可见元素上

真正难的不是让动画动起来，而是判断 DOM 是否该保留占位、何时卸载、焦点如何流转——这些决策点，比 CSS 规则本身更影响最终体验。

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