如何在 React 中使用 <animationMotion> 的 onend 事件？

Question

我想删除 dom when then animation ended of ，但我还没有在 react 文档 https://zh-hans.reactjs.org/docs/events 中找到 onend 事件.html#动画事件.

这是演示https://codesandbox.io/s/ecstatic-cherry-7nyh7r?file=/src/App.js

Answer 1

我自己找到了路！

// jsx part
<animateMotion ref={handleMotionRef}></animateMotion>

// js part
  function handleMotionRef(node) {
    // node?.onend = () => {} or
    node?.addEventListener(
      'beginEvent',
      (e) => {
        e.target.parentNode.style.display = 'block';
      },
      false,
    );
    node?.addEventListener(
      'endEvent',
      (e) => {
        e.target.parentNode.style.display = 'none';
      },
      false,
    );
  }