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上面都不难看出。