exitBeforeEnter 未按预期工作 - 页面转换出现问题答案

【问题标题】：exitBeforeEnter is not working as intended - Trouble w/ Page TransitionsexitBeforeEnter 未按预期工作 - 页面转换出现问题
【发布时间】：2021-06-27 00:07:13
【问题描述】：

我正在尝试使用 react-router-dom 和 framer-motion 的组合创建平滑的页面过渡，并且我正在尝试让我的页面在退出时淡出并在进入时淡入。但是 exitBeforeEnter 并没有按预期工作。退出时页面不会淡出，但每次都会下一个页面淡入。下面是我的代码，我将附上其中一个页面文件（所有页面的代码几乎相同）。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

App.js

import React from 'react';
import About from "./pages/About.js"
import Home from "./pages/Home.js"
import Projects from "./pages/Projects.js"
import { AnimatePresence } from 'framer-motion'
import { BrowserRouter as Switch, Route, useLocation } from "react-router-dom";

function App() {

  const location = useLocation();

  return (
    <div className="App">
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route path="/about" component={About} />
          <Route path="/projects" component={Projects} />
          <Route path="/" exact component={Home} />
        </Switch>
      </AnimatePresence>
    </div>
  );
}

export default App;

Home.js（页面文件）

import React from 'react';
import '../css/main.css';
import '../css/index.css';
import particleText from '../components/ParticleText.js'
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion'

const pageVariants = {
  in: { 
    opacity: 1,
    transition: {
      duration: 1
    } 
  },
  out: { 
    opacity: 0,
    transition: {
      duration: 1
    } 
  }
}

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    try { particleText(true) } catch { /* Error */ }
    return (
      <motion.div className="main" initial="out" animate="in" exit="out" variants={pageVariants}>
        <div className="introOverlay"></div>
        <Link to="/about" className="homeButtonContainer">
            <p className="homeButtonText">About Me</p>
        </Link>
        <Link to="/projects" className="homeButtonContainer">
            <p className="homeButtonText">My Projects</p>
        </Link>
      </motion.div>
    );
  }
}

export default Home;

【问题讨论】：

标签： html reactjs react-router react-router-dom framer-motion

【解决方案1】：

有点晚了，但万一你还在找……

如果AnimatePrecence 自身正在从反应树中卸载，exit 动画将不会发生。

在您的App.js 中试试这个：

return (
    <Router>
        <Route
            render={ ({location}) => (
                <AnimatePresence initial={ fase } exitBeforeEnter>
                    <Switch location={ location } key={ location.pathname }>
                        <Route
                            exact
                            path='/'
                            render={ () => <Home /> }
                        />
                        <Route
                            exact
                            path='/projects'
                            render={ () => <Projects /> }
                        />
                       <Route
                            exact
                            path='/about'
                            render={ () => <About/> }
                        />
                    </Switch>
                </AnimatePresence>
            ) }
        />
    </Router>
);

您可以留下回调，例如render，我只是为了清楚起见将其包含在内。

initial={false} 仅用于禁用后续页面重新加载的初始动画；

如果这不起作用，请确保在所有其他组件中保持相同的变体结构相同。

【讨论】：