How to use onend event of <animationMotion> in React?-CodePudding

I want to remove the dom when then animation ended of , but I haven't found the onend event in react docs https://zh-hans.reactjs.org/docs/events.html#animation-events.

Here is the demo https://codesandbox.io/s/ecstatic-cherry-7nyh7r?file=/src/App.js

CodePudding user response：

I found the way by mayself!

// 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,
    );
  }