动画的存在不会在路线上应用退出动画

Question

我刚开始制定议案，当我从一条路线到另一条路线，Home路线和Signup路线时，我试图在两条路线之间做一个出口转换。显然，唯一起作用的动画是组件挂载时的动画，而不是退出动画，即使我使用了AnimatePresence组件--这是index.js文件的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation
} from "react-router-dom";
import App from './App';
import { AnimatePresence } from 'framer-motion'
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

这是app.js文件的代码：

import React, { createContext, useState, useContext, useEffect, useReducer, useRef } from 'react';
import './style.css'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation
} from "react-router-dom";
import { motion, AnimatePresence } from 'framer-motion';
import Home from './Home';
import Signup from './Signup'
import Shop from './Shop';

export default function App() {
  const location = useLocation();
  return (
      <AnimatePresence exitBeforeEnter>
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={<Home />} />
          <Route path='/signup' element={<Signup />} />
          <Route path='/shop' element={<Shop />} />
        </Routes>
      </AnimatePresence>
  );
}

这是Home路由组件的代码：

import React, { useContext } from 'react';
import { pageInfo } from './App';
import './style.css'
import { motion, AnimatePresence } from 'framer-motion';
const variantss = {
    hidden: {
        opacity: 0,
        x: '-100vw'
    },
    visible: {
        opacity: 1,
        x: 0,
        transition: {
            type: 'spring',
            
        }
    },
    exit: {
        x: '-100vw',
        transition: {
            ease: 'easeInOut'
        }
    }
}
export default function Home() {
    return (
        <AnimatePresence>
            <motion.div
                className="home"
                variants={variantss}
                initial='hidden'
                animate='visible'
                exit='exit'
            >
                <h1>Hello this is the home page title</h1>
                <p>Hello the is the home page content</p>
            </motion.div>
        </AnimatePresence>
    );
}

这是Signup路由组件的代码：

import React, { useContext, useRef } from 'react';
import { pageInfo } from './App';
import './style.css'
import { motion, AnimatePresence } from 'framer-motion';
const variantss = {
    hidden: {
        opacity: 0,
        x: '-100vw'
    },
    visible: {
        opacity: 1,
        x: 0,
        transition: {
            type: 'spring',

        }
    },
    exit: {
        x: '-100vw',
        transition: {
            ease: 'easeInOut'
        }
    }
}
export default function Signup({ userSignUp }) {
    return (
        <motion.div
            variants={variantss}
            initial='hidden'
            animate='visible'
            exit='exit'
        >
            <h1>Hello this is the signup page title</h1>
            <p>Hello the is the signup page content</p>
            <form action="">
                <div>
                    <label htmlFor="name">
                        Type your name
                        <input type="text" id='name' />
                    </label>
                </div>
                <div>
                    <label htmlFor="nickname">
                        Type your nickname
                        <input type="text" id='nickname' />
                    </label>
                </div>
                <input type="submit" value='Sign up' />
            </form>
        </motion.div>
    );
}

Answer 1

尝试给你的motion.div的AnimatePresence孩子一个关键的道具。