display 无法触发 CSS 过渡，因其为离散属性、无中间值；应改用 opacity + visibility 协同控制，并显式声明 transition，必要时结合 max-height 或 transform 实现高度变化，同时注意可访问性与交互防护。
transition: display 0.3s 为什么完全没反应
浏览器压根不处理 transition: display，不是写错了，是规范层面禁止——display 是离散属性（none/block/flex 等之间没有中间值），无法插值。你在 DevTools 的 computed 样式里根本找不到这条规则，它被静默丢弃。
常见错误现象包括：
-
opacity动画正常，但只要同时操作display，整个过渡就“啪”一下跳变 - 写了
transition: all 0.3s，结果只有opacity或transform动，display部分毫无响应 - JS 同步执行
el.style.display = 'block'; el.classList.add('show')，起始帧直接丢失
用 opacity + visibility 替代的正确写法
这不是换一个属性，而是两个属性必须协同、显式声明、节奏对齐。关键点：初始态和目标态都要同时控制 opacity 和 visibility，且 transition 必须显式列出两者。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 初始隐藏态写成：
opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; - 显示态写成：
opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; -
visibility 0s 0.25s表示延迟生效，让它卡在opacity动画结束那一刻切换，避免半透明时误点 - 千万别只写
transition: all——它不会自动包含visibility，必须手动列出来
动画结束后要不要真设 display: none
取决于你是否需要释放布局空间或满足可访问性要求。如果只是淡入淡出效果，visibility + opacity 已足够；但如果元素内容庞大，或父容器有 overflow: hidden，visibility: hidden 仍占位，可能撑出滚动条抖动。
- 必须监听
transitionend事件，并过滤e.propertyName === 'opacity'，再执行el.style.display = 'none' - 同步设置
aria-hidden="true"，尤其对模态框、提示框等可访问性敏感组件 - 入场时反向操作：先设
display: block（或原值），再加show类触发过渡 - 别在动画中途手动操作
display，否则会中断过渡甚至导致跳变
容易被忽略的边界问题
真正难的不是让动画动起来，而是判断该保留占位、释放空间，还是绕开渲染流。比如：
- 快速连点开关时，
visibility: hidden可能提前应用，导致“闪一下又消失”——加pointer-events: none临时禁用交互可缓解 - 折叠面板类场景，仅靠
visibility无法收缩高度，得叠加max-height或transform: scaleY(0) - 所有方案都依赖元素始终在渲染树中——一旦 JS 提前删 DOM 或设
display: none太早，过渡就彻底没了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
