当转换在 div 上结束并且转换在所有 CHILD div 上结束时触发 webkitTransitionEnd 事件？

Posted 2023-03-06

【中文标题】当转换在 div 上结束并且转换在所有 CHILD div 上结束时触发 webkitTransitionEnd 事件？

【英文标题】：webkitTransitionEnd event fired when transitions end on div AND transitions end on all CHILD divs?

【发布时间】：2011-10-16 00:58:14

【问题描述】：

全部，

我的情况大致如下：

我的 html 页面 a 包含我正在执行转换的 div（我将其称为 "parentDiv"）。当过渡结束时，它应该调用 "onTransitionEndParent"

parentDiv 包含一个 div（我将其称为 "childDiv"），我在其上执行 不同 转换。当过渡结束时，它应该调用 "onTransitionEndChild"。

所以，我的代码大概是这样的：

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

我发现的问题...

onTransitionEndParent 在 parentDiv 的转换结束时调用（正确）。但是，当 childDiv 的转换结束时，它会被 ALSO 调用（不是我所期望的......）

换句话说……

onTransitionEndChild 在 childDiv 的过渡结束时调用 onTransitionEndParent 在 parentDiv 的转换结束时调用

再一次

当 childDiv 的过渡结束时

这是正确的行为，还是我做错了什么？

有没有办法确保仅在 parentDiv 的转换结束时调用 onTransitionEndParent，而不是在任何子 div 的转换结束时调用？

非常感谢。

【参考方案1】：

transitionEnd 是所谓的冒泡事件，它正在从子级发送（冒泡）到其父级。

您的选择：

要么分析事件对象的event.target 属性 - 它 应该包含结束过渡的元素。 或者在每个子元素上安装 transitionEnd 事件处理程序并调用 event.stopPropagation() 以防止其冒泡。

【讨论】：

谢谢，c-smile。完美的答案。

event.stopPropagation() 这个。不知道，你太棒了。

我不知道transitionEnd 冒泡了。纯属巧合，我已经有一年没有遇到这个问题了。我今天第一次体验它，很高兴我找到了你的答案。检查源元素以确定是否对其采取行动是我要走的路。

【参考方案2】：

我在上次 chrome 更新后遇到了同样的问题。子动画触发了父动画结束。这只发生在桌面版 Chrome 中，而不是 FF 或移动版 Chrome。

对于任何感兴趣的人，我使用以下方法解决了这个问题：

        $(element).on("animationend webkitAnimationEnd", function()
            //do something
        )
        .children().on("animationend webkitAnimationEnd", function()
             return false;   //you can just use event.stopPropagation()
         );

【参考方案3】：

要添加到@c-smiles 答案，当元素上有多个转换时，检查 event.propertyName 会有所帮助。所以，例如 -

button.addEventListener('transitionend', function(event) 
  if (event.target.classList.contains('button') && event.propertyName === 'opacity') 
    button.classList.add('hide');
  
, false);

【讨论】：

也许这应该是对@c-smiles 回答的评论？

我没有足够高的声誉来将 cmets 添加到其他答案中：( 必须获得 S.O 信誉

我需要这个！其他答案没有显示事件被传递给函数。这解决了我的问题