transition属性在动画结束时触发的事件是什么？

Question

在使用 CSS `transition` 属性实现元素动画时，开发者常遇到一个问题：如何准确监听动画的结束时刻？虽然 `transitionend` 事件专门用于在 CSS 过渡效果完成后触发，但在实际应用中，常因属性匹配不准确、多属性过渡触发多次事件或浏览器兼容性问题导致监听失效。例如，对 `width` 和 `opacity` 同时设置过渡时，`transitionend` 会分别触发两次，若未正确判断 `event.propertyName`，可能引发逻辑错误。此外，带前缀的属性或在动画中途被移除的元素也可能导致事件无法正常触发。因此，如何精确绑定并处理 `transitionend` 事件，成为实现复杂交互动画的关键技术难点。

Answer 1

一、CSS Transition 动画结束监听：基础认知与常见误区

在现代前端开发中，transition 属性被广泛用于实现平滑的 UI 变化。然而，当需要在动画结束后执行特定逻辑（如移除 DOM 元素、触发回调函数或启动下一个动画）时，开发者通常依赖 transitionend 事件。

该事件在每个完成过渡的 CSS 属性上独立触发。例如：

.element {
    transition: width 0.5s, opacity 0.5s;
}
    

当上述样式生效并发生状态变化时，transitionend 将分别针对 width 和 opacity 触发两次事件。

1.1 常见问题列表

• 未判断 event.propertyName 导致重复执行回调
• 元素在动画过程中被移除，导致事件无法触发
• CSS 属性名与 JavaScript 事件返回值不一致（如 background-color vs backgroundColor）
• 浏览器前缀兼容性问题（如旧版 WebKit 使用 webkitTransitionEnd）
• 复合属性（如 transform）内部多个子属性变化仅触发一次事件

二、深入解析：transitionend 事件机制与行为特征

transitionend 是一个冒泡事件，属于 TransitionEvent 类型，其核心属性包括：

属性名	类型	说明
propertyName	String	触发该事件的 CSS 属性名称（不含前缀）
elapsedTime	Float	过渡持续的时间（秒），包含延迟时间
pseudoElement	String	若为伪元素过渡，则返回伪元素选择器，否则为空字符串

值得注意的是，即使设置了 transition-delay，elapsedTime 仍包含延迟部分，这对调试时间线非常关键。

2.1 多属性过渡的事件分发模型

以下代码演示了多属性过渡时事件触发次数：

const el = document.querySelector('.animated');

el.addEventListener('transitionend', (e) => {
    console.log(`Property: ${e.propertyName}, Elapsed: ${e.elapsedTime}s`);
});
    

若同时改变 width 和 opacity，控制台将输出两条记录。若业务逻辑仅需执行一次，必须通过 propertyName 进行过滤或使用标志位控制执行频率。

三、实战解决方案：精准监听与容错处理

为解决上述问题，可采用以下策略构建健壮的监听机制。

3.1 使用事件委托与属性匹配

通过判断 e.propertyName 是否为目标属性，避免无关属性干扰：

function onTransitionEnd(targetProp, callback) {
    return function(e) {
        if (e.propertyName === targetProp) {
            callback.call(this, e);
        }
    };
}

// 使用示例
el.addEventListener('transitionend', onTransitionEnd('opacity', () => {
    console.log('Opacity transition finished');
}));
    

3.2 兼容性处理：跨浏览器事件绑定

由于历史原因，部分浏览器使用带前缀的事件名。推荐封装统一监听函数：

const TRANSITION_END_EVENTS = [
    'transitionend',
    'webkitTransitionEnd',
    'oTransitionEnd',
    'MSTransitionEnd'
];

function addTransitionEndListener(element, handler) {
    TRANSITION_END_EVENTS.forEach(event => {
        element.addEventListener(event, handler);
    });
    return () => {
        TRANSITION_END_EVENTS.forEach(event => {
            element.removeEventListener(event, handler);
        });
    };
}
    

四、高级模式与架构设计建议

在复杂交互系统中，建议引入状态机或 Promise 化封装来管理动画生命周期。

4.1 基于 Promise 的动画链

将单次过渡包装为 Promise，便于组合异步流程：

function waitForTransition(element, expectedProperty) {
    return new Promise((resolve) => {
        const cleanup = addTransitionEndListener(element, function(e) {
            if (e.propertyName === expectedProperty) {
                cleanup(); // 解绑所有事件
                resolve(e);
            }
        });
    });
}

// 使用方式
async function animateAndRemove() {
    el.style.opacity = '0';
    await waitForTransition(el, 'opacity');
    el.remove();
}
    

4.2 状态保护：防止元素提前销毁

若在动画进行中调用 removeChild，某些浏览器可能不会触发 transitionend。可通过以下方式规避：

1. 延迟销毁：等待事件完成后移除
2. 使用 visibility 或 display: none 替代直接移除
3. 添加临时占位符维持布局

五、可视化流程：transitionend 监听决策流程图

graph TD
            A[开始监听 transitionend] -- 绑定事件 --> B{是否多属性过渡?}
            B -- 是 --> C[检查 propertyName 是否匹配目标]
            B -- 否 --> D[直接执行回调]
            C -- 匹配 --> D
            C -- 不匹配 --> E[忽略事件]
            D --> F{是否需兼容旧浏览器?}
            F -- 是 --> G[同时监听 webkitTransitionEnd 等]
            F -- 否 --> H[仅监听 transitionend]
            G --> I[注册所有兼容事件]
            I --> J[执行业务逻辑]
            H --> J
            J --> K[清理事件监听器]