0

我试图在使用 Framer Motion 时淡出另一个 div 时在同一空间中淡出一个 div。即使过渡有延迟，对象本身也会立即渲染，这会导致同一空间中的另一个对象跳来跳去。

这是我正在尝试做的一个小代码示例：

  const [short, setShort] = useState(false);

  return (
    <div>
      <img src="image.jpg" />
      <AnimatePresence>
        {!short && (
          <motion.span
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ delay: 1.5 }}
            key="logoText"
          >
            TEXT
          </motion.span>
        )}
        {short && (
          <motion.span
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{delay: 1.5}}
            key="searchBox"
          >
            SOME DIFFERENT TEXT
          </motion.span>
        )}
      </AnimatePresence>

      <Button onClick={() => setShort(!short)}>Toggle</Button>
    </div>
  );
};

基本上占用的空间SOME DIFFERENT TEXT立即出现，将切换按钮向右推，然后按一次TEXT就消失了。然后SOME DIFFERENT TEXT在单击按钮后立即再次向右推出。

我怎样才能让两个项目占据相同的空间，以便它们无缝过渡到彼此？

4

1 回答 1

1

您可以将exitBeforeEnter道具（https://www.framer.com/api/motion/animate-presence/#animatepresenceprops.exitbeforeenter）添加到AnimatePresence组件中，这将确保在出现TEXT之前完全删除SOME DIFFERENT TEXT

于 2020-07-26T09:27:08.770 回答