- 综合排序
- 最热优先
- 最新优先
- 来自专栏零域Blog
前端弹性动画与 framer-motion 动画库初探
content {:toc} 前端动画的开发一直是我所热衷探索与研究的内容，本文将描述什么是拟真的动画效果，目前所流行的 React 动画库，以及一些基于 framer-motion 动画库的 demos | image.png 其中 framer-motion 可以说是异军突起，发展非常迅猛 ! 接下来将一起探索一下 framer-motion 的使用方式。 framer-motion 什么是 framer-motion？ 同样在浏览器中渲染时，出于性能优化的考虑，framer-motion 使用了 translate3d() 来开启 GPU 加速。 对于拟真的大面积布局/dom/svg react/rax动画可以考虑使用 framer-motion。
4.5K30编辑于 2022-03-28 - 来自专栏魔术师卡颂
React动效，真的这么丝滑么
import { motion } from "framer-motion" <motion.div initial={{ opacity: 0, y: -50 }} animate={{ opacity import { motion } from "framer-motion" <AnimatePresence> <motion.div exit={{ opacity: 0, y
2.1K10发布于 2020-12-29 - 来自专栏CRPER折腾记
Next.js 14 App Router引入 farmer-motion 初始化异常解决，顺带学点知识
// SlideLeftTransitionWrapper.tsx import { motion } from "framer-motion"; export default function Transition react.dev/reference/r… react.dev/reference/r… 修正执行 代码修正 "use client"; import { motion } from "framer-motion </motion.div> ); } 还能再抽象一点，比如我们取个名字， MotionElement.tsx "use client" import { motion } from "framer-motion
68810编辑于 2024-04-19 - 来自专栏Web前端
React 进度条组件 ProgressBar 详解
解决方案：使用 CSS 动画库如 framer-motion 或 react-spring 来实现更复杂的动画效果。 代码实现import React from 'react';import { motion } from 'framer-motion';import '.
1.2K10编辑于 2024-12-13 - ); } 路由进场动画 1、 新建 app/template.tsx 文件： "use client"; import { motion } from "framer-motion components/PageAnimatePresence/index.tsx 文件 "use client"; import { AnimatePresence, motion } from "framer-motion来自专栏Next.js 实战系列
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
." />
95310编辑于 2025-08-18
最受欢迎的 5 个 React 动画库
要安装 Framer Motion，请在终端上运行以下两个命令之一： npm install framer-motion Oryarn add framer-motion 接下来，添加以下代码块，以将简单的动画添加到 box 组件： import React from "react";import { motion } from "framer-motion";import ".
如何在 React 中快速实现暗黑模式
第一步 要开始使用 Chakra UI，需要通过在终端中运行以下命令将其安装在项目中： npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI React组件库入门指南
首先，我们需要安装Chakra UI及其依赖：bashnpm i @chakra-ui/react @emotion/react @emotion/styled framer-motion或者如果你使用 yarn：bashyarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion安装完成后，我们需要在应用的根组件中设置ChakraProvider
你不知道的33个令人惊艳的React开发库
framer-motion image.png 专门为react准备的动画库。
视差滚动效果实现
以下是一些你可以尝试的主流组件库： rellax (Lightweight, vanilla javascript parallax library) react-scroll-parallax framer-motion
React 应用架构实战 0x2：构建和文档化组件
# 安装及配置 安装： pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion 为了使用 Chakra UI，首先我们需要配置它的主题
使用Next.js创建Blog
安装依赖 pnpm install globby gray-matter dayjs @chakra-ui/react prismjs @emotion/react @emotion/styled framer-motion
React 动画真的难吗？我用一个库解决了困扰大半年的性能问题
场景：Next.js 页面切换 // pages/dashboard/[id].js import { AnimatePresence, motion } from'framer-motion'; import
如何用游戏化设计让 AI 编程变得更好玩
代码解释//前端使用React+TypeScriptimportReactfrom'react';//动画使用FramerMotionimport{AnimatePresence,motion}from'framer-motion
ES5 在 Web 上的现状
Lodash 否 仅 ES5 React 否 仅 ES5 date-fns 是 箭头函数 three.js 是 async/await，箭头函数，展开运算符，解构赋值 d3 是 箭头函数，展开运算符，解构赋值 Framer-motion
使用 React 和 ethers.js 构建DApp
3 步：安装 Chakra UI 通过运行 Chakra UI（文档[8]）来安装： yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
一种基于Qwen2.5-coder-32b+Bolt.new+v0+Cursor的无代码对话网站构建方法
其他: date-fns, framer-motion, openai等。主要特点前端框架: 使用React和TypeScript构建的现代前端应用。
前端架构师到底在干什么？
// 第三方库单独打包 vendor: ['react', 'react-dom'], ui: ['@headlessui/react', 'framer-motion
40道ReactJS 面试问题及答案
以下是有用的 npm 模块列表： react-router-dom redux redux-thunk formik yup framer-motion react-bootstrap styled-component
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号