transition必须写在永不被移除的基础类中，否则关闭时因样式丢失导致动画失效；禁用display: none，改用opacity与visibility协同；避免js快速切换class，需加过渡锁和属性过滤；height: auto无法过渡，应改用max-height或预设具体高度。
transition写在状态类里，移除后就没了
关闭弹窗时瞬间消失，最常见原因是把transition声明写进了会被classList.remove()干掉的类中。比如你写了.modal--open { opacity: 1; transition: opacity 0.3s; }，关的时候删掉这个类，transition就跟着没了——浏览器连“从哪开始过渡”都不知道，只能直接设opacity: 0。
必须把transition抽到一个**永不被移除的基础类**里：
.modal { transition: opacity 0.3s ease, transform 0.3s ease; }.modal--closed { opacity: 0; transform: translateY(10px); }.modal--open { opacity: 1; transform: translateY(0); }
用 DevTools 的 Computed 面板盯住transition-property，确保它在开/关状态下都稳定存在，而不是只在--open里闪一下。
用了display: none，动画根本不会启动
display是离散属性，没有中间态，浏览器压根不支持对它做transition。你写transition: all 0.3s + display: none，display部分会被静默丢弃，而opacity等其他属性也会被强制中断——因为display: none会让元素立刻脱离渲染树。
正确做法是用opacity和visibility协同控制：
- 初始态：
opacity: 0; visibility: hidden; - 过渡声明：
transition: opacity 0.25s ease, visibility 0s 0.25s;（visibility延迟生效，卡在opacity结束那一刻） - 关闭后，在
transitionend事件里检查event.propertyName === 'opacity'，再执行el.style.display = 'none'和el.setAttribute('aria-hidden', 'true')
JS快速切换class导致过渡被覆盖
用户连点关闭按钮，或动画未结束就再次触发打开，会造成新样式覆盖旧样式。浏览器不会自动取消正在进行的transition，结果就是卡在中间帧、跳变、甚至只动了10%就停住。
关键不是阻止点击，而是让动画链可控：
- 加个开关变量，比如
isTransitioning，在transitionend里重置 - 监听时过滤属性：
if (e.propertyName !== 'opacity' && e.propertyName !== 'transform') return; - 避免在同一个任务中连续增删 class：必要时用
requestAnimationFrame或setTimeout(() => ..., 0)让样式重排落地
height: auto 或未设初始值，起点不明确
想用height做展开/收起？height: auto无法插值——浏览器不知道“auto”到底等于多少像素，自然没法算中间帧。哪怕你写了transition: height 0.3s，它也只会从当前计算高度直接跳到0或auto，毫无过渡。
如果真要过渡高度，必须提供明确数值起点：
- 打开前，先用
getComputedStyle(el).height读出现有高度 - 设为内联
style.height（比如el.style.height = '240px';） - 再加
height: 0类触发收起 - 收起完成后，再清空
style.height，回归height: auto
更稳的方案是放弃height，改用max-height + overflow: hidden，但得预估一个足够大的值（比如max-height: 500px），否则收不全。
真正容易被忽略的，是把transition当成一次性配置——它得像呼吸一样持续存在，而不是“开的时候有、关的时候就撤”。一旦断掉，所有动画契约就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
