transitionend“没反应”的根本原因是css过渡未实际执行，常见于属性值未变化、使用不可过渡属性、元素不可见或未挂载dom等场景，需用getcomputedstyle验证过渡是否启动。
transitionend 为什么经常“没反应”
根本原因不是 JS 绑错了事件，而是 CSS 过渡压根没跑起来。浏览器只对真正发生值变化、且该属性可过渡的场景派发 transitionend。常见失效链路是：JS 改了 class → class 里声明了 transition → 但目标属性值没变 / 不可插值 / 元素不可见 → 浏览器跳过过渡 → 事件永不触发。
- 属性值未真实变化：比如两次都设
element.style.opacity = "1"，或 CSS 中.active { opacity: 1; }而元素初始就是opacity: 1 - 用了不可过渡属性：
display、height: auto、font-weight: bold（关键字）都不会触发transitionend - 元素处于
display: none或未挂载到 DOM（element.isConnected === false） - 伪元素（
::before）、继承来的属性（如从父级继承的color）不触发该事件
监听前先确认过渡是否真在执行
别急着写 addEventListener('transitionend', ...)，先用 getComputedStyle 验证变化是否发生：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const el = document.querySelector('.target');
console.log('current opacity:', getComputedStyle(el).opacity);
// 手动触发过渡后，再查一次，看值是否变了
el.classList.add('fade-in');
setTimeout(() => {
console.log('after add class:', getComputedStyle(el).opacity);
}, 10); // 小延迟，确保样式已计算
- 如果两次输出一样，说明过渡根本没启动，检查 class 是否生效、属性是否被更高优先级规则覆盖
- 用开发者工具的 “Computed” 面板，直接看
transition是否被标记为有效（没被划掉） - 避免用
transition: all，改用明确属性名，例如transition: opacity 0.3s, transform 0.3s
多个属性同时过渡时 event.propertyName 不可靠
当一个元素同时过渡 opacity 和 transform，transitionend 可能触发两次，且 event.propertyName 在 Safari 中可能返回空字符串或错误值——这不是 bug，是规范允许的行为。
- 不要依赖
event.propertyName做关键逻辑分支；若需区分，改用不同 class 控制不同属性，或用setTimeout按预期时长兜底 - 想确保只响应一次？加防抖标记：
if (el._transitioning) return; el._transitioning = true;，在 handler 末尾清掉 - 注意：
transitionend不冒泡，监听必须挂在目标元素本身，不能靠父元素代理
动态插入元素时 transitionend 绑定时机很关键
元素刚 appendChild 完，样式还没计算完，立刻加 class 触发过渡，transitionend 极易漏掉——因为浏览器可能把“初始状态→终态”的变化当成一次性赋值，跳过过渡帧。
- 正确做法：插入后强制重排，再加动画 class
el.appendChild(newNode);newNode.offsetHeight; // 强制 layoutnewNode.classList.add('animate'); - 或者用
requestAnimationFrame推迟到下一帧：requestAnimationFrame(() => newNode.classList.add('animate')); - 动态生成的元素，CSS 选择器必须精确匹配（比如写成
.container img而不是.container:nth-of-type(1)），否则动画根本不应用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
