React Router + Animation 库问题：组件在使用 react-router-dom 卸载之前不会动画

Posted 2023-02-22

【中文标题】React Router + Animation 库问题：组件在使用 react-router-dom 卸载之前不会动画

【英文标题】：React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom

【发布时间】：2020-09-02 21:14:07

【问题描述】：

我有以下代码：

import React from "react";
import  BrowserRouter, Route, NavLink  from "react-router-dom";
import  AnimatePresence, motion  from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => 
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact=true key="1">
          <motion.div
            initial= opacity: 0 
            animate= opacity: 1 
            exit= opacity: 0 
            transition= duration: 2 
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact=true key="2">
          <motion.div
            initial= opacity: 0 
            animate= opacity: 1 
            exit= opacity: 0 
            key="something"
            transition= duration: 2 
          >
            <Something />
          </motion.div>
        </Route>
      </AnimatePresence>
    </BrowserRouter>
  );
;

export default App;

它应该在<Hi/> 和<Something/> 被挂载时进行淡入 动画，在它们被卸载时淡出。安装动画发生，但另一个没有。在动画效果开始之前，这两个组件都已卸载，并且所有动画库都会出现问题：framer-motion、react-transition-group 等。

【参考方案1】：

不确定您是否仍在寻找答案，但我通过将 exitBeforeEnter 标志添加到 AnimatePresence 解决了类似的问题。

所以...

//...
<AnimatePresence exitBeforeEnter>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
//...