Framer Motion 'Exit' 属性不适用于 Nextjs答案

【问题标题】：Framer Motion 'Exit' property not working with NextjsFramer Motion 'Exit' 属性不适用于 Nextjs
【发布时间】：2021-09-14 01:49:49
【问题描述】：

我刚开始使用 Framer motion 和 Nextjs，遇到了一个问题，我无法让 exit 属性设置动画。下面的代码显示我正在尝试打开和关闭“你好”这个词，当这个词在打开时出现时，退出动画在移除时不会触发。 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;

【问题讨论】：

标签： next.js framer-motion

【解决方案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>

【讨论】：