transition配合class切换是实现状态驱动显隐动画的最佳方案，需用opacity+visibility或max-height+overflow组合替代display，scss中用@mixin封装参数化动效，js需监听transitionend并校验propertyname以确保精准清理。
用 transition 配合 class 切换实现状态驱动显隐动画
纯 CSS 动画无法响应 JS 状态变化，必须靠 class 控制；transition 是最轻量、最可控的显隐动画方案，比 @keyframes 更适合开关类交互。
关键点在于：显隐不能只靠 display: none（它不触发 transition），得组合 opacity + visibility 或 height + overflow。
-
opacity: 0+visibility: hidden→ 适合淡入淡出，无高度变化 -
max-height: 0+overflow: hidden→ 适合有内容高度变化的折叠/展开（注意设合理max-height上限） - 务必在「稳定态」class 上写
transition，而不是在「切换态」上写（否则首次进入无动画）
.panel {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.panel.is-hidden {
opacity: 0;
visibility: hidden;
}
SCSS 中用 @if 控制不同状态下的动画参数
SCSS 的逻辑判断不是运行时行为，而是编译时生成不同 class；适用于「多套预设状态」场景（比如主题色切换导致动效时长/缓动不同），而非响应式状态。
常见误用：试图用 @if $is-active 让 SCSS 直接读取 JS 变量 —— 这不可能，SCSS 编译完就没了。
- 真正有用的是：按组件变体生成不同动效规则，例如
.dropdown--fast和.dropdown--smooth - 用
@mixin封装可复用的过渡逻辑，再配合@if分支注入参数 - 避免在
@if中写复杂条件，SCSS 不支持运行时计算布尔值，只认变量字面量或feature-exists()类函数
@mixin fade-transition($duration: 0.2s, $easing: ease) {
transition: opacity $duration $easing, visibility $duration $easing;
}
.card {
@include fade-transition();
}
.card.card--slow {
@include fade-transition(0.4s, ease-out);
}
JS 触发状态变更时，如何避免动画抖动或失效
最常见的问题是：JS 快速连续 toggle class，导致 transition 被中断或卡在中间态。根本原因在于浏览器没来得及重排（reflow）就又改了样式。
- 确保 class 切换是「原子操作」：先移除旧状态 class，再加新状态 class，不要同时操作多个影响 layout 的属性
- 需要强制重排时，读一个 offsetHeight 或 getComputedStyle(el).opacity —— 但仅在必要时用，它是性能杀手
- 对「显→隐→显」高频切换，加防抖或用
getTransitionEndEvent()监听transitionend，而不是依赖 setTimeout - 注意：
transitionend在opacity和visibility上触发次数不同（后者不触发），别漏判
动画结束后清理 class 的时机很关键
显隐动画常伴随 DOM 操作（比如隐藏后 remove()），但直接在 setTimeout 里删元素会出错：时间设短了动画没完，设长了卡顿。
正确做法永远是监听 transitionend，且过滤事件目标和属性名。
- 用
event.propertyName === 'opacity'判断是否是你要的动画结束 - 如果用了多个 transition 属性（如 opacity + transform），
transitionend会触发多次，不加判断就执行清理会出错 - 用
el.addEventListener('transitionend', handler, { once: true })自动解绑，避免内存泄漏
el.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && e.target === el) {
el.remove();
}
}, { once: true });
实际项目中最容易被忽略的是：把动画控制逻辑分散在 JS、SCSS、CSS 三处，结果改一个时长要翻三份文件。建议把所有动效参数（时长、缓动、延迟）抽成 CSS 自定义属性，JS 通过 el.style.setProperty('--anim-duration', '0.3s') 动态注入，SCSS 用 var(--anim-duration) 读取 —— 这样才真正统一控制点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
