为什么我的成帧器运动动画没有在卸载时触发？

Question

我正在尝试使用 framer 运动库在组件卸载时添加动画，但它不起作用。我正在使用退出和初始道具值，但没有动画可见。

我的 app.tsx 文件：

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Loader from './Components/Loader';
import { AnimatePresence, motion } from 'framer-motion';

const App: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 5000);
  });

  return (
    <div className="App">
      <AnimatePresence exitBeforeEnter>
        {
          loading ?
            <Loader/> 
            :
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
            </header>
        }
      </AnimatePresence>
    </div>
  );
};

export default App;

我要将卸载动画添加到的加载器组件：

import { motion } from 'framer-motion';
import React from 'react';
import './style.css';

const Loader: React.FC = () => {
  return (
    <motion.div 
      initial={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <div className={'loader'}>
        <h1>Loading...</h1>
        <p>Some last minute bug fixes..</p>
      </div>
    </motion.div>
  );
};

export default Loader;

Answer 1

来自docs：

Child motion components must each have a unique key prop so AnimatePresence can track their presence in the tree.

任何字符串都可以，只要它是唯一的：

<AnimatePresence exitBeforeEnter>
    {
      loading ?
        <Loader key="loader"/> 
        :
        <header className="App-header" key="header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
    }
  </AnimatePresence>

为什么我的成帧器运动动画没有在卸载时触发？

why isnt my framer motion animation not triggering on unmount?

javascript

animation

typescript

reactjs

framer-motion