进有动画、出无动画需动态控制transition属性：进入时添加含transition的类，离开前立即移除该类并设opacity为0或display为none，避免触发反向过渡。
transition只在元素出现时触发，离开时不加动画
用 transition 实现“进有动画、出无动画”，本质是避免离开时触发过渡——不是靠删样式，而是靠动态控制过渡属性本身。CSS 里没有“仅进入”的原生开关，得靠 JS 配合类名切换，或纯 CSS 利用伪类/状态变化时机做文章。
- 纯 CSS 方案最常用的是：进入时加类（带
transition），离开时立刻移除该类（同时把transition也一并拿掉） - 不能只改
opacity或transform值，还必须确保移除类的那一刻，transition属性已不存在，否则浏览器仍会补全离开动画 - 常见错误是：用
:hover或:focus模拟进出，但离开态仍保留了transition声明，导致反向动画照常发生
用 JavaScript 控制 transition 的添加与清除时机
JS 是最可靠的方式：只在元素准备显示时临时加上带过渡的类，且在隐藏前不等动画结束就立刻清除它。关键在「清除类的时机」——必须在隐藏操作（如设 display: none 或移除 DOM）之前，且不能等到 transitionend 事件。
- 进入时：
element.classList.add('fade-in')（.fade-in含transition: opacity 0.3s ease-in） - 离开时：先
element.classList.remove('fade-in')，再立即设置element.style.opacity = 0或element.style.display = 'none' - 千万别在
transitionend里才移除类——那样离开动画已经跑了一半 - 如果用
requestAnimationFrame，可在下一帧清除类，更稳妥（避免样式未及时重绘）
用 visibility + opacity 组合避开 display 切换的坑
直接切 display 会中断所有过渡，但用 visibility 可保布局、又能瞬间隐藏。配合 opacity 过渡，就能做到进有淡入、出即消失。
- 初始状态：
visibility: hidden; opacity: 0; - 进入类：
visibility: visible; opacity: 1; transition: opacity 0.25s; - 离开操作：只设
opacity: 0，不设transition；然后在setTimeout或transitionend里设visibility: hidden（可选，仅为了真正不可交互） - 注意：若元素有子元素监听
pointer-events，visibility: hidden会透传点击，此时需额外加pointer-events: none
transition-property 设为 none 的临时方案
想临时禁用过渡？别改整个 transition 声明，直接设 transition-property: none。它比删 transition 更干净，且兼容性好（IE10+ 支持）。
- 进入时：
transition-property: opacity; transition-duration: 0.3s; - 离开前：
element.style.transitionProperty = 'none';，再改opacity值 - 之后若要复用过渡，得手动恢复
transition-property，不能依赖 CSS cascade 自动回退 - 这个技巧适合封装成工具函数，比如
forceInstant(element)，避免每次手动写两行
getComputedStyle 在关键步骤打日志验证状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
