AnimatePresence 在动画时显示两个元素

Question

我要制作一个类似步进的动画，因此，当我点击一个按钮时，会显示比上一个按钮多一个div，例如：

import { motion, AnimatePresence } from 'framer-motion'

const MyApp= props => {
  const [count, setCount] = useState(0)

  return (
    <>
      <AnimatePresence>
        {count == 0 && (
          <motion.div
            transition={{ duration: 2 }}
            initial={{ opacity: 1 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            Hello 1
            <button onClick={() => { setCount(count + 1) }}
          </motion.div>
        )}
      </AnimatePresence>
      <AnimatePresence>
        {count == 1 && (
          <motion.div
            transition={{ duration: 2 }}
            initial={{ opacity: 1 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            Hello 2
            <button onClick={() => { setCount(count + 1) }}
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

export default MyApp

但是，问题是，当一个 div 正在衰减 out/in 时，另一个也在衰减 in/out，因此，我同时有两个元素。相反，我认为它只会为一个动画，删除它，然后为另一个动画。

我是不是做错了什么？

Answer 1

既然你想把它们放在一起做动画，它们应该在一个下面<AnimatePresence />
AnimatePresence 要求您在其下方设置动画的组件上添加一个显式键，以便它可以在添加和删除组件时跟踪它们https://www.framer.com/api/motion/animate-presence/#unmount-animations
由于您想用一个组件替换另一个组件，您需要在 AnimatePrensence 上添加道具 exitBeforeEnter。 https://www.framer.com/api/motion/animate-presence/#animatepresenceprops.exitbeforeenter

        <AnimatePresence exitBeforeEnter> // Note on #3
          {isGreenBox ? (// Note on #1
            <GreenBox
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0 }}
              key="green" // Note on #2
            />
          ) : (
            <PurpleBox
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0 }}
              key="purple" // Note on #2
            />
          )}
        </AnimatePresence>

这是我创建的一个工作示例:) https://codesandbox.io/s/framer-motion-animation-presence-exitbeforeenter-0miq0

AnimatePresence 在动画时显示两个元素

AnimatePresence show both elements when animating

animation

reactjs

framer-motion