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

Question

全部，

我的情况大致如下：

我的 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 的转换结束时调用？

非常感谢。

Answer 1

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

您的选择：

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

Answer 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()
         });

Answer 3

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

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