transition触发需依赖样式变更而非class切换本身，必须确保CSS类定义目标属性且切换前未激活，强制重排或requestAnimationFrame可解决初始状态问题，transitionend监听应精确匹配propertyName并使用once选项。

transition 触发必须依赖样式变更，而非 class 切换本身

很多人以为只要用 element.classList.add() 或 element.className = 改了 class，transition 就自动生效——其实不是。浏览器需要先完成样式计算（layout/reflow），再进入动画帧。如果 JS 在同一执行栈里连续改 class 和样式（比如立刻改 opacity），浏览器可能合并渲染，跳过过渡。

• ✅ 正确做法：确保 class 切换后，目标样式（如 opacity、transform）是通过 CSS 类定义的，且该类在切换前未激活
• ❌ 错误写法：el.classList.add('fade-in'); el.style.opacity = '1'; —— 后者会覆盖 CSS 过渡规则
• ⚠️ 注意：若目标属性在旧 class 和新 class 中都声明（比如都写了 opacity: 0 和 opacity: 1），但中间没有「中间态」或「延迟触发」，transition 可能不触发

强制重排（forced layout）是常见但易被滥用的手段

有时你需要让 transition 立刻从“初始值”开始动，比如刚插入 DOM 的元素。此时直接加 class 不会动，因为浏览器还没计算初始样式。常用解法是读取一个触发 layout 的属性（如 offsetHeight），强制刷新样式树。

• ✅ 安全写法：

  el.classList.add('slide-up');
  // 强制重排，让浏览器记住当前状态
  void el.offsetHeight;
  el.classList.add('active');

• ⚠️ 避免频繁调用：offsetHeight、getComputedStyle()、scrollLeft 都会触发 layout，大量使用影响性能
• ? 替代方案：用 requestAnimationFrame 延迟到下一帧（更轻量）：

  el.classList.add('slide-up');
  requestAnimationFrame(() => {
    el.classList.add('active');
  });

transitionend 事件监听要防重复和冒泡

监听 transitionend 是收尾动作（如清理 class、恢复状态）的关键，但实际中容易出错。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• ✅ 绑定时加 { once: true }，避免多次触发：

  el.addEventListener('transitionend', handler, { once: true });

• ⚠️ 注意事件冒泡：如果父容器也有 transition，可能触发多次；建议用 event.propertyName 精确匹配，比如只响应 'transform'
• ⚠️ 兼容性：Firefox 早期版本对 transitionend 的 propertyName 返回值有差异，建议用 event.propertyName === 'transform' 而非正则匹配
• ❌ 不要用 setTimeout 模拟 duration，因为用户可能调高系统动画速度、禁用动画，或 CSS 中用了 ease-out 导致实际耗时浮动

多个 transition 属性混用时，务必显式声明

当同时过渡 transform 和 opacity，但只想监听其中某一个结束时，CSS 里的 transition 声明方式直接影响 JS 行为。

立即学习“Java免费学习笔记（深入）”；

• ✅ 推荐写法：

  .box {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  —— 明确列出每个属性，transitionend 的 propertyName 才能准确区分
• ❌ 危险写法：transition: all 0.3s ease; —— 任何属性变化都会触发事件，包括继承来的、浏览器自动生成的（如 box-shadow 暗色调整）
• ⚠️ 注意：如果某个属性在 class 切换前后没变（比如 color 始终是 #333），它不会触发 transitionend，哪怕你写了 transition: all

实际项目里最常卡住的，是忘了「初始状态是否已渲染」和「transition 是否真被应用到目标属性上」——这两个点不排查，加再多 requestAnimationFrame 都没用。