1. 首頁 > 生活百科 > >

React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來( 二 )

生活百科

。哪個更輕松相信大家一目了然 。
列表側邊欄一般都是帶有菜單的，那么我們是不是可以讓這個側邊欄也有一個逐次出現的效果呢？就像這樣：

React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來

文章插圖
這里我們是不是已經開始肌肉記憶般的計算延遲時間 ， 思考如何進行整體效果的分配 。那么如果這里我們使用frame motion，它的實現方式應該是怎么樣的呢？
首先我們先來進行單個Item的封裝：
import * as React from "react";import { motion } from "framer-motion";const variants = {open: {y: 0,opacity: 1,transition: {y: { stiffness: 1000, velocity: -100 }}},closed: {y: 50,opacity: 0,transition: {y: { stiffness: 1000 }}}};const colors = ["#FF008C", "#D309E1", "#9C1AFF", "#7700FF", "#4400FF"];export const MenuItem = ({ i }) => {const style = { border: `2px solid ${colors[i]}` };return (<motion.livariants={variants}whileHover={{ scale: 1.1 }}whileTap={{ scale: 0.95 }}><div className="icon-placeholder" style={style} /><div className="text-placeholder" style={style} /></motion.li>);};然后我們在已封裝Item的基礎上，再進行整個菜單的封裝：
import * as React from "react";import { motion } from "framer-motion";const itemIds = [0, 1, 2, 3, 4];const variants = {open: {transition: { staggerChildren: 0.07, delayChildren: 0.2 }},closed: {transition: { staggerChildren: 0.05, staggerDirection: -1 }}};export const Navigation = () => (<motion.ul variants={variants}>{itemIds.map(i => (<MenuItem i={i} key={i} />))}</motion.ul>);沒錯，動畫！就是這么簡單！
更多API更詳細、更具體的功能大家可以參考下官方的使用文檔，我就不在這里一一列舉了 。
美中不足其實不難看出，不論是實現的效果，還是使用方式，對于前端的同學來說framer-motion都是非常友好的工具 。這一點從npm的Weekly Downloads以及github的star上面都不難看出 。
React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來

文章插圖

React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來

文章插圖
但是目前也有一個問題，那就是包的體積問題 。
React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來

文章插圖
這個包的大小對于部分的系統來說，還是不夠友好 。這也是很多人不選擇使用它的原因 。
【React動畫實現方案之 Framer Motion，讓你的頁面“自己”動起來】

推薦閱讀