什么是motion組件？

一種動畫組件
motion組件文檔

在nextjs中的應用步驟

1.安裝motion

npm i framer-motion

2.在next.config.js中配置轉義

export default {transpilePackages: ['framer-motion']
}

3.開始應用
**注意要點：**在服務端渲染不可直接用，但凡用到motion的地方都要封裝成客戶端組件
舉例：需要一個motion.div作為容器
首先把motion.div封裝成客戶端組件

'use client'
import { motion, MotionProps } from "motion/react"declare type Props = {children?:React.ReactNode
} & MotionPropsexport default function MotionDIV(props: Props) {return <motion.div {...props}>{props.children}</motion.div>
}

然后在需要的頁面調用這個組件

import MotionDIV from './MotionDIV'
const variants = {hidden: { opacity: 0, y: 50 },visible: { opacity: 1, y: 0 },
};
export default async function HomePage(){return (<MotionDIV className="root"variants={variants}initial="hidden"whileInView="visible"transition={{ duration: 0.5 }}viewport={{ once: true }}>hello world</MotionDIV>)
}

以上。