Framer Motion 'Exit‘属性不适用于Nextjs

Question

我刚开始使用Framer motion和Nextjs，我遇到了一个问题，我无法让exit属性设置动画。下面的代码显示，我正在尝试打开和关闭单词“Hello”，虽然单词在打开时出现，但退出动画在删除时不会触发。Framer API文档建议AnimatePresence需要包装如下所示的motion.div，以便触发退出动画，但这并没有解决这个问题。

任何帮助都将不胜感激。

import React from "react";
import classes from "./FramerMotion.module.css";
import { motion, AnimatePresence, } from "framer-motion";
import { useState } from "react";

function FramerMotion() {
  const [words, setWords] = useState(true);

  

  const toggleWords = (event) => {
    setWords(words === false);
    console.log(words);
  };

  const codeVariant = {
    start: {
      opacity: 0,
    },
    middle: {
      opacity: 1,
      transition: {
        duration: 3,
      },
    },
    end: {
      opacity: 0,
      transition: {
        duration: 3,
      },
    },
  };

  return (
    <>
      <div className={classes.container}>
        {words && (
            <AnimatePresence>
          <motion.h1
            key="modal"
            variants={codeVariant}
            initial="start"
            animate="middle"
            exit="end"
          >
            Hello
          </motion.h1>
          </AnimatePresence>
        )}
      </div>

      <button onClick={toggleWords}>Show/Hide</button>
    </>
  );
}

export default FramerMotion;

Answer 1

我解决了这个问题。问题是AnimatePresence放错了地方。

修复：

 return (
    <>
      <div className={classes.container}>
       <AnimatePresence>
        {words && (
            
          <motion.h1
            key="modal"
            variants={codeVariant}
            initial="start"
            animate="middle"
            exit="end"
          >
            Hello
          </motion.h1>          
        )}
     </AnimatePresence>
      </div>