使用 Framer Motion 让一个元素淡入另一个元素之上

Question

我正在尝试淡出一个 div 与我在使用 Framer Motion 时试图淡出另一个 div 相同 space。即使在过渡上有延迟，对象本身也会立即呈现，这会导致同一 space 中的另一个对象跳来跳去。

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

  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 占用的 space 立即出现，将切换按钮向右推，然后在 TEXT 消失后推入。然后单击按钮后 SOME DIFFERENT TEXT 再次向右推出。

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

Answer 1

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

使用 Framer Motion 让一个元素淡入另一个元素之上

Have one element fade in on top of the other one with Framer Motion

javascript

css

reactjs

animation

framer-motion