当 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 的转换结束时被调用（正确）。然而，它ALSO在childDiv的转换结束时调用（不是我所期望的...）

换句话说...

• onTransitionEndChild在childDiv的转换结束时调用
• onTransitionEndParent在parentDiv的转换结束时调用 当 childDiv 的转换结束时再次

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

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

非常感谢。

Answer 1

transitionEnd 是所谓的冒泡事件，它从子级分派（冒泡）到其父级。

您的选择：

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

Answer 2

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

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

Answer 3

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

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

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