个人建立网站要多少钱临夏州住房与建设局官方网站

个人建立网站要多少钱,临夏州住房与建设局官方网站,网站版式分类,做网站需要给设计提供大家好#xff0c;我是jobleap.cn的小九。 你想要掌握 framer-motion 库的常用用法#xff0c;并获取一份基于 Next.js 15 的详细实战教程#xff0c;要求串联该库的核心 API 并落地到实际项目中。以下教程会从环境搭建到核心 API 拆解#xff0c;再到综合实战#xff0c;…大家好我是jobleap.cn的小九。你想要掌握 framer-motion 库的常用用法并获取一份基于 Next.js 15 的详细实战教程要求串联该库的核心 API 并落地到实际项目中。以下教程会从环境搭建到核心 API 拆解再到综合实战完整覆盖 framer-motion 的高频用法且完全适配 Next.js 15 的 App Router 规范。一、前置准备环境搭建framer-motion 是客户端动画库需在 Next.js 15 的客户端组件中使用加use client标识。1. 创建 Next.js 15 项目# 初始化 Next.js 15 项目npx create-next-applatest framer-motion-demo# 进入项目目录cdframer-motion-demo2. 安装 framer-motionnpminstallframer-motion# 或 yarn/pnpmyarnaddframer-motionpnpmaddframer-motion二、核心 API 详解与实战逐个拆解代码示例以下所有示例均基于 Next.js 15 的 App Routerapp/目录所有组件需添加use client声明。1. 基础组件motion 包装器framer-motion 的核心是给原生 HTML 标签div/button/span 等套上motion.xxx包装器使其具备动画能力。示例代码app/page.tsxuse client // 必须声明为客户端组件 import { motion } from framer-motion export default function Home() { return ( div classNamep-10 {/* 基础 motion 组件 */} motion.div classNamew-40 h-40 bg-blue-500 rounded-lg // 初始状态 initial{{ opacity: 0, scale: 0.8 }} // 目标动画状态 animate{{ opacity: 1, scale: 1 }} // 过渡效果 transition{{ duration: 0.5 }} 基础动画组件 /motion.div /div ) }核心说明motion.xxx支持所有原生 HTML 标签如motion.button、motion.spaninitial组件挂载前的初始状态animate组件挂载后要达到的动画状态transition动画的过渡配置时长、缓动效果等。2. 过渡效果transition 配置transition用于控制动画的速度、缓动、延迟、重复等是动画的核心配置项。常用配置项duration动画时长秒ease缓动函数如easeInOut、easeOut、lineardelay动画延迟执行时间repeat循环次数Infinity表示无限循环repeatType循环方式reverse反向循环、loop从头循环type动画类型spring弹簧动画、tween补间动画。示例代码use client import { motion } from framer-motion export default function TransitionDemo() { return ( motion.div classNamew-40 h-40 bg-purple-500 rounded-lg mt-10 initial{{ x: -100 }} animate{{ x: 0 }} transition{{ duration: 0.8, // 动画时长0.8秒 ease: easeInOut, // 缓动效果 delay: 0.2, // 延迟0.2秒执行 repeat: Infinity, // 无限循环 repeatType: reverse, // 反向循环 type: spring, // 弹簧动画更自然的物理效果 stiffness: 100 // 弹簧刚度值越大越硬 }} 过渡动画演示 /motion.div ) }3. 手势交互whileHover/whileTap/whileFocus用于实现「鼠标悬浮/点击/聚焦」时的即时动画效果无需手动控制。示例代码use client import { motion } from framer-motion export default function GestureDemo() { return ( div classNamemt-10 {/* 悬浮放大点击缩小聚焦高亮 */} motion.button classNamepx-6 py-3 bg-green-500 text-white rounded-lg whileHover{{ scale: 1.1, backgroundColor: #22c55e }} // 悬浮效果 whileTap{{ scale: 0.95 }} // 点击效果 whileFocus{{ boxShadow: 0 0 0 4px rgba(34, 197, 94, 0.4) }} // 聚焦效果 transition{{ duration: 0.2 }} 手势交互按钮 /motion.button /div ) }4. 变体Variants批量复用动画配置当多个组件需要共享相同的动画逻辑时用variants定义动画模板避免重复代码。示例代码use client import { motion } from framer-motion // 定义变体动画模板 const cardVariants { hidden: { opacity: 0, y: 20 }, // 初始状态 visible: { opacity: 1, y: 0, transition: { duration: 0.4 } // 每个变体可单独配置过渡 }, hover: { scale: 1.05, boxShadow: 0 4px 12px rgba(0,0,0,0.1) } // 悬浮状态 } export default function VariantsDemo() { return ( div classNamemt-10 grid grid-cols-3 gap-4 {/* 复用变体配置 */} {[1,2,3].map((item) ( motion.div key{item} variants{cardVariants} // 绑定变体 initialhidden // 初始使用 hidden 变体 animatevisible // 动画使用 visible 变体 whileHoverhover // 悬浮使用 hover 变体 classNamep-4 bg-gray-100 rounded-lg 卡片 {item} /motion.div ))} /div ) }5. 动画控制useAnimation 钩子手动控制动画的执行/暂停/反向适用于「点击按钮触发动画」等交互场景。示例代码use client import { motion, useAnimation } from framer-motion import { useState } from react export default function ControlDemo() { // 创建动画控制器 const controls useAnimation() const [isAnimated, setIsAnimated] useState(false) // 手动触发动画 const toggleAnimation () { if (isAnimated) { controls.start({ scale: 1, rotate: 0 }) // 恢复初始状态 } else { controls.start({ scale: 1.2, rotate: 180 }) // 执行动画 } setIsAnimated(!isAnimated) } return ( div classNamemt-10 motion.div classNamew-40 h-40 bg-red-500 rounded-lg mb-4 initial{{ scale: 1 }} animate{controls} // 绑定控制器 transition{{ duration: 0.5 }} / button onClick{toggleAnimation} classNamepx-4 py-2 bg-black text-white rounded {isAnimated ? 恢复 : 触发动画} /button /div ) }6. 布局动画layout 属性当组件的尺寸/位置变化时如列表项增减、元素宽高变化layout会自动生成平滑的过渡动画无需手动配置。示例代码use client import { motion } from framer-motion import { useState } from react export default function LayoutDemo() { const [isExpanded, setIsExpanded] useState(false) return ( div classNamemt-10 motion.div layout // 开启布局动画 className{bg-yellow-400 rounded-lg p-4 ${isExpanded ? w-80 : w-40}} onClick{() setIsExpanded(!isExpanded)} transition{{ duration: 0.3 }} 点击{isExpanded ? 收缩 : 展开} /motion.div /div ) }7. 组件卸载动画AnimatePresence默认情况下组件卸载时不会有动画AnimatePresence包裹组件后可通过exit属性定义卸载动画需配合key唯一标识组件。示例代码use client import { motion, AnimatePresence } from framer-motion import { useState } from react export default function PresenceDemo() { const [show, setShow] useState(true) return ( div classNamemt-10 button onClick{() setShow(!show)} classNamepx-4 py-2 bg-gray-800 text-white rounded mb-4 {show ? 隐藏 : 显示}元素 /button {/* AnimatePresence 包裹需要卸载动画的组件 */} AnimatePresence {show ( motion.div keydemo-box // 必须加唯一key initial{{ opacity: 0, y: 20 }} animate{{ opacity: 1, y: 0 }} exit{{ opacity: 0, y: -20 }} // 卸载动画 transition{{ duration: 0.3 }} classNamew-40 h-40 bg-indigo-500 rounded-lg / )} /AnimatePresence /div ) }三、综合实战串联所有 API 实现待办列表以下示例整合上述所有核心 API实现一个带完整动画的待办列表覆盖「添加/删除/悬浮/点击/布局变化/手动控制」等场景。完整代码app/todo/page.tsxuse client import { motion, AnimatePresence, useAnimation } from framer-motion import { useState, useRef } from react // 定义待办项类型 type Todo { id: string text: string completed: boolean } // 定义全局变体 const containerVariants { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 // 子元素依次动画错开0.1秒 } } } const todoItemVariants { hidden: { opacity: 0, x: 20 }, visible: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -20, height: 0, margin: 0 }, hover: { scale: 1.02, boxShadow: 0 2px 8px rgba(0,0,0,0.1) }, tap: { scale: 0.98 } } export default function TodoList() { const [todos, setTodos] useStateTodo[]([]) const inputRef useRefHTMLInputElement(null) const controls useAnimation() // 添加待办 const addTodo () { if (!inputRef.current?.value.trim()) return const newTodo: Todo { id: Date.now().toString(), text: inputRef.current.value.trim(), completed: false } setTodos([...todos, newTodo]) inputRef.current.value // 触发容器动画 controls.start(visible) } // 删除待办 const deleteTodo (id: string) { setTodos(todos.filter(todo todo.id ! id)) } // 切换完成状态触发布局动画 const toggleComplete (id: string) { setTodos( todos.map(todo todo.id id ? { ...todo, completed: !todo.completed } : todo ) ) } return ( div classNamemax-w-md mx-auto mt-10 p-4 h2 classNametext-2xl font-bold mb-4动画待办列表/h2 {/* 输入框 添加按钮 */} div classNameflex gap-2 mb-6 input ref{inputRef} typetext placeholder输入待办事项... classNameflex-1 px-4 py-2 border rounded-lg / motion.button whileHover{{ scale: 1.05 }} whileTap{{ scale: 0.95 }} onClick{addTodo} classNamepx-4 py-2 bg-green-500 text-white rounded-lg transition{{ duration: 0.2 }} 添加 /motion.button /div {/* 待办列表容器复用变体布局动画 */} motion.div variants{containerVariants} initialhidden animate{controls} classNamespace-y-2 AnimatePresence {todos.map(todo ( motion.div key{todo.id} variants{todoItemVariants} initialhidden animatevisible exitexit whileHoverhover whileTaptap layout // 布局动画完成状态切换时的样式变化 className{flex items-center justify-between p-3 rounded-lg ${ todo.completed ? bg-gray-200 line-through : bg-white border }} transition{{ duration: 0.3 }} span onClick{() toggleComplete(todo.id)} classNamecursor-pointer flex-1 {todo.text} /span motion.button whileHover{{ scale: 1.1, color: red }} whileTap{{ scale: 0.9 }} onClick{() deleteTodo(todo.id)} classNameml-2 text-gray-500 × /motion.button /motion.div ))} /AnimatePresence /motion.div {/* 空状态提示 */} AnimatePresence {todos.length 0 ( motion.p keyempty-tip initial{{ opacity: 0 }} animate{{ opacity: 1 }} exit{{ opacity: 0 }} classNametext-gray-500 text-center mt-4 暂无待办事项添加一个吧 /motion.p )} /AnimatePresence /div ) }功能说明点击「添加」按钮新增待办项子元素依次入场staggerChildren悬浮待办项时放大阴影whileHover点击时缩小whileTap点击待办文本切换完成状态布局动画layout平滑过渡样式变化点击删除按钮待办项执行卸载动画AnimatePresence exit空状态提示也有入场/退场动画。四、总结关键点回顾核心基础framer-motion 需在 Next.js 15 的客户端组件use client中使用通过motion.xxx包装原生标签赋予动画能力核心 APIinitial/animate/exit定义组件挂载/卸载的动画状态transition控制动画时长、缓动、循环等过渡属性variants批量复用动画配置支持父子组件联动useAnimation手动控制动画的执行/暂停layout自动生成尺寸/位置变化的布局动画AnimatePresence配合exit实现组件卸载动画实战原则动画需贴合交互场景避免过度动画优先使用变体和布局动画提升代码复用性。通过上述教程你已掌握 framer-motion 所有常用 API并能在 Next.js 15 中落地实战可基于该教程扩展更多复杂动画如路径动画、滚动触发动画等。