使用 Framer Motion 让一个元素淡入另一个元素答案

【问题标题】：Have one element fade in on top of the other one with Framer Motion使用 Framer Motion 让一个元素淡入另一个元素
【发布时间】：2020-11-15 16:22:18
【问题描述】：

我正在尝试淡出同一空间中的一个 div，因为我正在尝试使用 Framer Motion 淡化另一个 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在按钮被点击后再次向右推出。

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

【问题讨论】：

标签： javascript css reactjs animation framer-motion

【解决方案1】：

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

【讨论】：