react-spring具有基于钩子和基于组件的API，这里将专门针对所有动画使用具有基本状态的钩子.

framer-motion也很好用,但是体积2M多,太大了劝退

react-spring才6KB.   react-spring npm搜索

老官网react-spring 

官网Getting started | React Spring

做了个横向遍历依次显示的动效demo

import React, { useState } from "react";
import "./styles.css";
import { useSprings, animated } from "react-spring";export default function App() {// 6组动画const [springs, api] = useSprings(6,(i) => ({from: { opacity: 0, y: 100, scale: 0.5 },to: { opacity: 1, y: 0, scale: 1 },delay: i * 600, // 延时config: { duration: 500 }}),[]);return (<div className="App"><h1>react-spring动效</h1><div className="list">{springs.map((props, index) => (<animated.div key={index} style={props} className="item">{index}</animated.div>))}</div></div>);
}

keen-ellis-fxlvwn - CodeSandbox