reactjs - react 我想在动画结束时隐藏div标签

Question

我正在使用 framer-motion 制作动画。当动画 pageVariants 结束时，我想隐藏用于动画的 div 标签。目前，当动画结束时，div 标签会移动到屏幕底部，以便用户可以垂直滚动。我想让它在动画结束后用户不能垂直滚动。有什么方法可以检测动画何时结束？

import { motion } from 'framer-motion';
import { FunctionComponent } from 'react';

const Home: FunctionComponent = () => {
  const ease = [0.43, 0.13, 0.23, 0.96];

  const pageVariants = {
    initial: {
      y: '0',
      transition: { ease, duration: 10, delay: 0.8 },
    },
    animate: {
      y: '100%',
      transition: { ease, duration: 10 },
      transitionEnd: { display: "none",},
    },
    exit: {
      y: '0',
      opacity: 0,
      transition: { ease, duration: 10, delay: 0.8 },
    },
  };
  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto' }}>
        <div className="bg-red-100 h-screen">box</div>
        <div className="bg-blue-100 w-96">box2</div>
      </div>
      <div
        style={{
          width: '300px',
          position: 'absolute',
          marginLeft: 'auto',
          marginRight: 'auto',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div>
          <img src="profile.svg" />
          <p>hello</p>
        </div>
      </div>
      <motion.div
        className="h-screen bg-white absolute z-50 w-full -top-0"
        variants={pageVariants}
      ></motion.div>
    </>
  );
};

export default Home;

Answer 1

在 framer-motion 的文档中 transitionEnd属性进行了描述。如果你像这样将它设置为你的 motion div，它应该在动画结束时消失:

<motion.div
        className="h-screen bg-white absolute z-50 w-full -top-0"
        variants={pageVariants}
        animate={{
          transitionEnd: {
            display: "none",
          },
        }}
      >
</motion.div>