在 useState 切换到 Route 组件之前在 motion 组件上启动 'exit'

Question

我有一个 <motion.div> 元素，它在渲染 <Home/> 路由组件之前通过一些 Framer Motion 变体进行动画处理。

<motion.div> 的 'hidden' 和 'visible' 动画目标按预期工作，但我不确定如何触发 'exit' 动画 before/on setTimeout 结束，<Home/> 组件呈现。

  const animation = { 

    hidden: {
      opacity:0,
      x: 0,
    },
    visible: {
      opacity:1,
      x: 10,
    },
    exit: {
      opacity:0,
      x: 0,
    }
  }

  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 2000)
  }, [])

  return (

    <AnimatePresence initial="false" exitBeforeEnter>
      <div className="flex">
        <div>

        {
          loading 
        ? 
          <motion.div 
            style={{
              width:100,
              height:100,
              backgroundColor: "orange"
            }}
            variants = {animation}
            initial = 'hidden'
            animate = 'visible'
            exit = 'exit'>

          </motion.div>
        :

          <Switch>
            <Route exact path="/">
              <Home/>
            </Route>
            <Route exact path="/about">
              <About/>
            </Route>
          </Switch>
        }

        </div>
      </div>
    </AnimatePresence>

Answer 1

这个有用吗？

     <div className="flex">
      <div>
        <AnimatePresence exitBeforeEnter>
          {loading ? (
            <motion.div
              style={{
                width: 100,
                height: 100,
                backgroundColor: "orange",
              }}
              variants={animation}
              initial="hidden"
              animate="visible"
              exit="exit"
              key="loader"
            ></motion.div>
          ) : (
            <Switch key="switch">
              <Route exact path="/">
                <Home />
              </Route>
              <Route exact path="/about">
                <About />
              </Route>
            </Switch>
          )}
        </AnimatePresence>
      </div>
    </div>

注意：

我将动画效果移动到立即包围您的相关元素
我在 AnimatePresense 内部的 children 中添加了显式键，即使它们是片段也是必需的

在 useState 切换到 Route 组件之前在 motion 组件上启动 'exit'

Initiate 'exit' on motion component before useState switches to Route component

reactjs

framer-motion

use-state