为什么我的Framer Motion组件exit卸载动画没有触发？

问题原因 #

• <AnimatePresence>的直接子元素没有绑定唯一key属性，Framer Motion 依赖key识别元素的挂载/卸载状态，没有key就无法触发exit动画
• 未给motion元素配置transition属性，默认动画时长极短，会导致肉眼看不到动画效果
• 额外问题：useEffect未添加空依赖数组，会在组件每次重渲染时都重新创建定时器，造成不必要的性能消耗

修复后的代码 #

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 key="loader"/> // 给子元素加唯一key
            :
            <header key="content" className="App-header"> // 另一个子元素也加唯一key
              <img src={logo} className="App-logo" alt="logo" />
            </header>
        }
      </AnimatePresence>
    </div>
  );
};

export default App;

Loader.tsx #

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 }}
      transition={{ duration: 0.3 }} // 配置动画时长，单位秒，可自行调整
    >
      <div className={'loader'}>
        <h1>Loading...</h1>
        <p>Some last minute bug fixes..</p>
      </div>
    </motion.div>
  );
};

export default Loader;

内容的提问来源于stack exchange，提问作者Tamjid