react之react-spring动效库

最新推荐文章于 2024-10-02 15:01:36 发布

yusirxiaer

最新推荐文章于 2024-10-02 15:01:36 发布

阅读量708

点赞数

分类专栏： React 文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/128275156

版权

React 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用react-spring库创建的横向遍历依次显示效果的案例。通过使用useSprings钩子，实现了6组动画的渐显效果，并详细展示了实现这一效果的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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