如何在 Child 运行动画时从运行ning 停止 parent 的 onAnimationEnd

Question

我有一个简单的代码，其中有一个 Parent div 和一个 Child Div，它们都有自己的动画和一个启动动画的按钮，两者都有一个在控制台上显示消息的 onAnimationEnd 事件。

每当我点击 parent 按钮时，动画就会开始，当它结束时，我会在控制台上看到正确的消息。

  Parent Ended Animation

到现在没问题。

当我单击 Child 按钮时动画开始，当它结束时我收到 Child 的消息和 parent 的消息。

Child Ended Animation App.

Parent Ended Animation App

.

这就是我的问题。

那么当 child 动画结束时，如何停止运行的 parent 事件？

const ParentAnimation = keyframes`
  from {
    background-color: red;
  }to {
    background-color: blue;
  }
`
const Parent = styled.div`
  background-color: red;
  height: 300px;
  width: 300px;
  animation: ${(props) =>
    props.animate &&
    css`
      ${ParentAnimation} .5s
    `};
`

const ChildAnimation = keyframes`
  from {
    background-color: green;
  }to {
    background-color: yellow;
  }
`
const Child = styled.div`
  background-color: green;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100%;
  animation: ${(props) =>
    props.animate &&
    css`
      ${ChildAnimation} .5s
    `};
`
function App() {
  const [animeteParent, setAnimeteParent] = useState(false)
  const [animeteChild, setAnimeteChild] = useState(false)
  return (
    <Parent
      animate={animeteParent}
      onAnimationEnd={() => console.log('Parent Ended Animation')}
    >

      <Child
        animate={animeteChild}
        onAnimationEnd={() => console.log('Child Ended Animation')}
      >
      </Child>

      <button
        onClick={() => {
          setAnimeteParent(true)
        }}
      >
        Animate Parent
      </button>

      <button
        onClick={() => {
          setAnimeteChild(true)
        }}
      >
        Animate Child
      </button>

    </Parent>
  )
}

Answer 1

在您的函数中调用 event.stopPropagation(); 以阻止事件冒泡。

事件冒泡

您看到的是 'Event bubbling'。它不是唯一的反应，实际上是大多数 html onXYZ() 处理程序中使用的模式。在这种情况下，让 'animation end' 一直冒到顶部真的没有意义。
我想确认一个标准的方法来处理事件比为每个事件类型创建异常更重要。

对于点击事件，冒泡是有意义的，想象一下 5 个嵌套的 div，点击 child 与点击 parent 是一样的。所以我们也应该触发 parent 的 'onclick'。

这叫做冒泡；只要现在有人停止它，事件就会在所有 parent 中冒泡。以便 parents 可以处理该事件。（它通过共享名称的事件处理程序冒泡，onclick 到 onclick，onAnimationEnd 到 onAnimationEnd，等等）

阻止泡沫

阻止事件冒泡很容易。通过调用 event.stopPropagation(); 由开发人员决定他们何时允许某些内容在 parent 中冒泡；

在 child 上添加 stopPropagation 应该会阻止 parent 在 child 完成时触发它们的事件。

 onAnimationEnd={(event) => {
          console.log("Child Ended Animation");
          event.stopPropagation();
        }}

例子

有一个code pen example显示这个

如何在 Child 运行动画时从运行ning 停止 parent 的 onAnimationEnd

How to stop a parent's onAnimationEnd from running when a Child run an animation

css-animations

reactjs

事件冒泡

阻止泡沫

例子

如何在 Child 运行 动画时从 运行ning 停止 parent 的 onAnimationEnd

How to stop a parent's onAnimationEnd from running when a Child run an animation

css-animations

reactjs

事件冒泡

阻止泡沫

例子

如何在 Child 运行动画时从运行ning 停止 parent 的 onAnimationEnd