#8229·swiper

元素 Transition End 使用 {once: true} 有 气泡 守护, 所以一个后人 的 transition End 默默地 消耗了听器

作者: lbwexler创建于 2026年9月4日更新于 2026年9月4日
标签t0ggles

shared/utils.mjs (v14.0.0 到 14.2.0):

javascript
function elementTransitionEnd(el, callback) {
    if (!callback) return;
    el.addEventListener('transitionend', function fireCallBack(e) {
        if (e.target !== el) return;
        callback.call(el, e);
    }, {once: true});
}

transitionend 会冒泡 - 这就是为什么存在 e.target !== el 保护措施的原因。但是 {once: true} 在调用时会移除监听器,在保护措施运行之前。因此,从任何子元素冒泡上来的 transitionend 会销毁监听器,并且元素自身的转换结束将永远不会被观察到。Swiper 将 transition-property 设置为其默认值 all,因此竞争的子元素通常是 Swiper 的自己的 .swiper-slide-shadow* 元素,setTransition 为其赋予了相同的持续时间。

内容来源: nolimits4web/swiper