pmndrs/react-spring

最近记录的来源活动: 2026年5月21日 15:38

SkillsMP 收录数据更新: 2026年11月12日 12:52

已收集 skills: 14

GitHub 星标: 29,273
GitHub Forks: 1,237

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/pmndrs/react-spring.

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

<p align="center"> <img src="https://i.imgur.com/QZownhg.png" width="240" /> </p> <br /> <h1 align="center">react-spring</h1> <h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3> <br> <p align="center"> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/v/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/dm/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://discord.gg/AXfNsGx64f" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord"> </a> </p> <br> `react-spring` is a cross-platform spring-physics first animation library. It's as simple as: ```jsx const styles = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }) <animated.div style={styles} /> ``` Just a small bit about us: - **Cross-Platform**: We support `react-dom` and `react-three-fiber`. - **Versatile**: Be declarative with your animations or if you prefer, imperative. - **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well. There's a lot more to be had! Give it a try and find out. ## Getting Started ### ⚡️ Jump Start ```shell # Install the target you need npm install @react-spring/web # or, for react-three-fiber npm install @react-spring/three ``` ```jsx import { animated, useSpring } from '@react-spring/web' const FadeIn = ({ isVisible, children }) => { const styles = useSpring({ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 24, }) return <animated.div style={styles}>{children}</animated.div> } ``` It's as simple as that to create scroll-in animations when value of `isVisible` is toggled. ### 📖 Documentation and Examples More documentation on the project can be found [here](https://www.react-spring.dev). Pages contain their own [examples](https://react-spring.dev/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view! --- ## 📣 What others say <p align="middle"> <img src="assets/testimonies.jpg" /> </p> ## Used by <p align="middle"> <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a> <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a> <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a> </p> And [many others...](https://github.com/pmndrs/react-spring/network/dependents) ## Backers Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/pmndrs). <a href="https://opencollective.com/pmndrs#backers" target="_blank"> <img src="https://opencollective.com/pmndrs/backers.svg?width=890"/> </a> ## Contributors This project exists thanks to all the people who contribute. <a href="https://github.com/react-spring/react-spring/graphs/contributors"> <img src="https://opencollective.com/pmndrs/contributors.svg?width=890" /> </a>

正在加载仓库 README…

这个仓库中的 skills

软件开发工程师

1 个职业分类 · 已分类 100%

软件开发工程师

Validate current branch follows feature branch naming conventions

原文语言：英语

2026-05-21

已展示 14 / 14 个已收集 Skill。