Framer Motion动画在Next.js中不工作13.4.19

lc8prwob  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(112)

我正在尝试使用Framer Motion向我的Next.js应用程序添加动画。但是,我的文件结构与大多数教程不同,动画无法按预期工作。
这是我的文件结构:File Structure我正在使用NextJS 13.4.19
我尝试动画我的导航栏你可以看看下面的代码

"use client";
import { motion } from "framer-motion";

export default function Navbar() {
  return (
    <motion.div
        initial={{ opacity: 0, y: 15 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 15 }}
        transition={{ delay: 0.25 }}
    >
      <div className="w-full h-[112px] bg-primary"></div>
    </motion.div>
  );
}

我在page.js中导入了这个组件

import Navbar from "@/components/Navbar";

export default function Home() {
  return (
    <>
      <Navbar />
    </>
  );
}

动画不工作的权利!

yx2lnoni

yx2lnoni1#

我正在处理同样的问题,首先我认为它与我的IDE的版本有关,但我仍然通过查看我的代码使动画正常工作。

相关问题