尝试使用 Framer Motion 制作旋转木马时出现视觉错误

Question

我正在尝试在 React 中使用 Framer Motion 制作旋转木马，但我遇到了视觉错误。之前的组件没有在新组件之前被卸载，我得到了一个奇怪的效果。this Gyazo

这是处理一切的组件：

const ProjectList = props => {

  const [page, setPage] = useState(0);

  const projects = [
    <Project 
      name="Example"
      desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero nunc consequat interdum varius sit amet."
      image={require("../img/office.jpg")}
    />,
    <Project 
      name="Example2"
      desc="Another example. This one does nothing too. What a suprise!"
      image={require("../img/office.jpg")}
    />
  ]

  const paginate = (newPage) => {
    if(newPage < 0) {
      setPage(projects.length - 1)  
    } else if (newPage > projects.length - 1) {
      setPage(0);
    } else {
      setPage(newPage);
    }
  }

  return (
    
    <div className="project-list">
      <AnimatePresence>
        <motion.button 
          key="previous"
          onClick={() => paginate(page-1)}
          className="carousel-btn"
          whileHover={{scale: 1.5, transition: {duration: 0.5}}}
        >
          <ArrowBackIosIcon/>
        </motion.button>
        <motion.div
          key={page}
          initial={{opacity: 0}}
          animate={{opacity: 1}}
          exit={{opacity: 0}}
        >
          {projects[page]}
        </motion.div>

        <motion.button 
          key="next" 
          onClick={() => paginate(page+1)}
          className="carousel-btn" 
          whileHover={{scale: 1.5, transition: {duration: 0.5}}}>
          <ArrowForwardIosIcon/>
        </motion.button>
      </AnimatePresence>
    </div>
  );

};

我不确定如何在代码片段工具中使用像 framer-motion 这样的库，所以这是 CodeSandbox 上的精简版本

Answer 1

如果您希望一个组件在下一个组件的 mount 动画之前完成其 unmount (exit) 动画启动，您必须打开 AnimatePresence 的 exitBeforeEnter.

https://www.framer.com/api/motion/animate-presence/#animatepresenceprops.exitbeforeenter

不知道那个视觉错误，因为它在 CodeSandbox 示例中不可见。但这可能是因为该组件（暂时）从 DOM 中删除，这会导致重新排序。一个解决方案可能是只将持有图像的 motion.div 放在 AnimatePresence 内，就像我在这里所做的那样：

https://codesandbox.io/s/carousel-with-framer-motion-Whosebug-lmrik?file=/src/components/ProjectList.js

尝试使用 Framer Motion 制作旋转木马时出现视觉错误

Having visual bug when trying to make carousel with Framer Motion

reactjs

animation

framer-motion