css动画不触发display: none元素因其被排除在渲染树外；visibility: hidden元素虽在渲染树中但可能因绘制跳过或继承遮挡导致动画不可见；正确做法是先显式设可见再动态添加动画类。
为什么display: none上的CSS动画不触发
因为浏览器在布局阶段就跳过display: none元素，它根本不在渲染树中，自然不会进入绘制或动画流程。哪怕你写了@keyframes和animation: slide-in 0.3s，只要元素初始是display: none，动画就不会启动——不是“暂停”，是压根没注册。
常见错误现象：getBoundingClientRect()返回全零值；用 JS 先设display: block再读offsetTop，再设animation，结果动画仍不播，因为浏览器把这次样式变更合并处理了，没给动画留“起始帧”。
- 动画必须作用在处于渲染树中的元素上，
display: none直接让它出局 -
transition对display完全无效，CSS 不定义中间状态（没有display: half-block这种东西） - 即使后续用 JS 切回
display: block，也不会自动重播已定义的animation，除非手动加animation-play-state: paused再切回running，但极难控制时机
visibility: hidden为什么也常“卡住”动画
visibility: hidden元素仍在渲染树里，尺寸、位置、计数器都正常，但它只跳过“绘制”阶段。问题在于：动画本身能跑，但你看不见——尤其当动画依赖opacity或transform时，如果起始状态就是visibility: hidden，浏览器可能直接跳到终态渲染，或因优化略过中间帧。
更隐蔽的问题是继承性：父元素设了visibility: hidden，子元素即使写了visibility: visible，也可能被遮挡（比如父层有背景色），你以为动画在播，其实被盖住了。
-
visibility支持transition语法，但只有visible/hidden两个离散值，过渡本身无视觉变化 - 真正要淡入，得配
opacity: 0 → 1，且确保visibility在动画开始前已是visible（否则opacity过渡会被visibility压制） - 不要写
visibility: hidden; animation: fade-in 0.3s;——动画会执行，但第一帧就被visibility锁死不可见
怎么让隐藏元素的动画真正播起来
核心原则：动画触发时机必须和可见性切换解耦。不能靠属性初始值“自带动画”，得靠类名动态添加来“唤醒”。
- HTML 中元素初始用
style="visibility: hidden;"或class="is-hidden"，不写animation - CSS 单独定义一个动效类，比如
.animate-in { animation: slide-up 0.3s ease-out forwards; } - JS 显隐时分两步：
el.style.visibility = 'visible';→el.classList.add('animate-in');（注意顺序，先显再加类） - 如果要用
display控制存在性，先设display: block，用setTimeout(() => el.classList.add('animate-in'), 0)或requestAnimationFrame延后加类，确保重排完成
容易被忽略的兼容与可访问性细节
最麻烦的不是动画播不播，而是播了但不该播、或播了但不该被读到。
-
display: none元素默认不被屏幕阅读器读取，visibility: hidden默认仍可能被读——需要显式加aria-hidden="true" - 旧版 Safari 对
visibility: hidden+pointer-events: none组合支持不稳定，想实现“点击穿透”，优先用pointer-events: none单独控制，别依赖visibility - 打印样式表中，
visibility: hidden不影响输出，display: none才真正不打印——如果通知弹窗要支持打印，这点必须检查 - 频繁切换的列表项，用
visibility + opacity比反复display切换性能更好，但要注意opacity: 0仍会触发合成层，大量使用可能拖慢滚动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
