display不可过渡，浏览器静默丢弃transition规则；应显式声明可动画属性，opacity与visibility需协同控制，并在transitionend后手动切换display以彻底卸载dom。

display 是离散属性，浏览器根本不计算中间状态

你写的 transition: display 0.3s 不是“没效果”，而是被浏览器静默丢弃——display 的取值（none、block、flex）之间没有数学关系，无法插值。就像不能给“苹果→香蕉”算出 50% 的中间水果一样，浏览器连过渡帧都不会生成，DevTools 的 Computed 面板里根本找不到这条规则。

transition: all 会悄悄放过 display，但你发现不了

transition: all 0.3s 看似省事，实际埋雷：只要样式变更涉及 display、visibility、height: auto 或 z-index，这些属性就静默失效，且不报错、不警告。更稳妥的做法是显式列出可动画属性：

transition-property: opacity, transform, background-color;

查 MDN 时盯紧「Animatable」字段是否为 ✅；在 DevTools Styles 面板中鼠标悬停 transition，如果提示 “Transition will not be applied to display”，就是明确信号。

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

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

下载

opacity + visibility 组合必须协同声明，不能只改一个

只设 opacity: 0 而不配 visibility: hidden，元素仍挡点击、抢焦点；只设 visibility: hidden 而不声明 transition，它就会瞬间切换，破坏动画节奏。正确写法要同时控制两者：

• 初始态：opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s;
• 显示态：opacity: 1; visibility: visible;
• visibility 0s 0.25s 表示延迟生效，卡在 opacity 动画结束那一刻，避免半透明时误点

真正难的不是写 CSS，而是决定要不要释放 DOM 占位空间

用 opacity 和 visibility 只解决了“视觉过渡”，但元素仍占布局空间、参与重排、影响滚动条。若需像 display: none 那样彻底卸载：

• 退场时监听 transitionend，过滤 event.propertyName === 'opacity' 后再执行 el.style.display = 'none'
• 入场前先设 display: block（或原值），再加过渡类——否则起始帧丢失，动画直接跳变
• 别忘了同步处理可访问性：aria-hidden="true" 不能靠 visibility: hidden 自动解决

DOM 卸载时机和动画完成的错位，才是线上最容易被忽略、却最影响体验的环节。

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