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
?
?
)
)
