javascript - 使用 framer-motion 在 Route Transitions 中未触发的退出动画

Question

我一直在尝试使用 framer-motion 为路线过渡设置动画，但退出动画并未按预期触发。入口动画可以正常工作。

我想：

• 当跳转到/从“配置文件”时，应该触发标题和组件转换。下面的代码做到了。

• 在两个管理路由（例如“Security”和“Config”）之间跳转时，不应触发标头转换，仅应触发组件转换，这似乎标头没有移动。问题来了，header 的行为符合预期，但是跳转时不会触发组件的退出动画。

CodeSandBox：这里

代码在这里：

管理员.js

import React from "react";
import { Switch, Route } from "react-router-dom";
import { Container } from "reactstrap";
import { AnimatePresence, motion } from "framer-motion";

import Sidebar from "components/Sidebar/Sidebar";
import AdminNavbar from "components/Navbars/AdminNavbar";
import AdminFooter from "components/Footers/AdminFooter";
import ProfileHeader from "components/Headers/ProfileHeader";
import StatisticsHeader from "components/Headers/StatisticsHeader";
import Profile from "views/Profile";
import Dashboard from "views/Dashboard";
import Security from "views/Security";
import Log from "views/Log";
import Config from "views/Config";

class Admin extends React.Component {
  constructor(props) {
    super(props);

    this.transition = {
      type: "tween",
      ease: "anticipate"
    };

    this.variants = {
      header: {
        profile: {
          in: {
            y: 0,
            transition: {
              duration: 1,
              ...this.transition
            }
          },
          out: {
            y: "-100%",
            transition: {
              duration: 0.8,
              ...this.transition
            }
          }
        },
        statistics: {
          in: {
            y: 0,
            transition: {
              duration: 0.5,
              ...this.transition
            }
          },
          out: {
            y: "-100%",
            transition: {
              duration: 0.3,
              ...this.transition
            }
          }
        }
      },
      component: {
        profile: {
          in: {
            opacity: 1,
            transition: {
              duration: 1,
              ...this.transition
            }
          },
          out: {
            opacity: 0,
            transition: {
              duration: 0.8,
              ...this.transition
            }
          }
        },
        admin: {
          in: {
            opacity: 1,
            transition: {
              duration: 0.5,
              ...this.transition
            }
          },
          out: {
            opacity: 0,
            transition: {
              duration: 0.3,
              ...this.transition
            }
          }
        }
      }
    };
  }

  render() {
    const key =
      this.props.location.pathname === "/profile" ? "non-admin" : "admin";

    return (
      <>
        <Sidebar />
        <div className="main-content" ref="mainContent">
          <AdminNavbar />
          <AnimatePresence exitBeforeEnter initial={false}>
            <Switch location={this.props.location} key={`switch-${key}`}>
              <Route exact path="/profile">
                <motion.div
                  initial="out"
                  animate="in"
                  exit="out"
                  variants={this.variants.header.profile}
                >
                  <ProfileHeader />
                </motion.div>
                <motion.div
                  initial="out"
                  animate="in"
                  exit="out"
                  variants={this.variants.component.profile}
                >
                  <Profile />
                </motion.div>
              </Route>
              <Route>
                <motion.div
                  initial="out"
                  animate="in"
                  exit="out"
                  variants={this.variants.header.statistics}
                >
                  <StatisticsHeader />
                </motion.div>
                <motion.div
                  key={`component-${this.props.location.pathname}`}
                  initial="out"
                  animate="in"
                  exit="out"
                  variants={this.variants.component.admin}
                >
                  <Route exact path="/dashboard">
                    <Dashboard />
                  </Route>
                  <Route exact path="/security">
                    <Security />
                  </Route>
                  <Route exact path="/log">
                    <Log />
                  </Route>
                  <Route exact path="/config">
                    <Config />
                  </Route>
                </motion.div>
              </Route>
            </Switch>
          </AnimatePresence>
          <Container fluid>
            <AdminFooter />
          </Container>
        </div>
      </>
    );
  }
}

export default Admin;

我应该怎么办？

标签： javascriptreactjsreact-routerframer-motion