时间戳

首页 > 解决方案 > 反应我想在动画结束时隐藏 div 标签

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

问题描述

我正在使用 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;

标签： reactjstypescriptframer-motion

解决方案

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

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

推荐阅读