如何为 React 提供 Animate Group

背景

在上一家公司时，由于技术相对自由，产品一般是老板，对于交互没有什么要求，出于学习的目的，经常性会在前端项目里加入很多动画。

当时使用的框架还是 Vue.js，框架内置组件中的 Transition 和 TransitionGroup 可以快速提供一些简单的动画和进出栈动画。再加上当时自己鼓捣 animate.js，基本也可以实现自己对动画的大部分需求。

来到目前的公司后，虽然产品流程完整，但还是接到没有任何动画上的需求。本着“人人都可以是产品”的理念，在创建钱包流程的一个回填助记词的地方，我想要去实现类 TransitionGroup 的进出栈动画。

关于motion-framer

是在一篇科普文中了解到这个动画库，当时看了它的文档，组件式的写法觉得和 React 的契合度很高。后面用到了 Charkr UI 发现里面提供动画支持的还是它，顿生崇拜，于是立马开用（再见animate.js ）。

开始鼓捣

正如 motion-framer 在文档中提到的那样，React 的列表渲染依赖于 Array.prototype.map , 而 React 的生命周期中无法监听组件卸载之前和推迟组件卸载直到动画完成。

所以 motion 提供了 AnimatePresence 来监听子 motion 元素的卸载事件。


import { AnimatePresence, motion } from 'motion-framer';

export const Notifications = ({ messages }) => (
  <AnimatePresence exitBeforeEnter initial={false} >
    {messages.map(({ id, content }) => (
      <motion.li
        key={id}
				layout
				inital={{opacity: 0}}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        {content}
      </motion.li>
    ))}
  </AnimatePresence>
)

这样就实现了控制元素的出入栈动画，实际的效果可能还需要调整 intital 和 exit 来完成动画正反的逻辑，另外 motion 组件上的 layout 属性可以实现在元素位置变化时自动为元素添加动画，在一些自动占位的 grid 、 flex 或 float 布局中很好用。

`AnimatePresence` 的原理

待研究

Flag

其实在本博客的开发过程中，也有想做出入动画的想法。但当时没找到一个较好的方案，只是用 Charkr UI 提供的组件做了简单实现，之后考虑用 motion 自己写一下。

一些想法

其实很想吐槽我们公司的产品，平时会和产品分享一些有意思设计或者巧思。但是他总会开玩笑说，这个不是很简单。但最后我们的产品中却没有任何巧思，只是写割裂的交互和不完整的体验。而且目前在开发Web3应用时，老板和产品对整个经济模型和智能合约体系没有一个很强的概念，真的给我一种撞钟和尚拉磨驴的感觉，顿时不知道整个公司的人都在干嘛。

另外今天bilibili上的 “二舅” 这个视频引起了广泛讨论，有人在赞叹up主的文案，有人在羡慕二舅的乐观，有人说是歌颂苦难版的 “后浪”。

另外这个视频带火了精神内耗这个词，”治好精神内耗“ 给我的感觉就是希望大家不要对现状感到焦虑，淡然接受。但它也不是官方极力反对的“躺平”，而是好好做韭菜，不要多想。

另外分享下今天一直在循环的 下个星期去英国