spring react
In this article we’ll be exploring one of the best animation frameworks for React: React Spring. You’ll learn some of the basics behind changing you component styling into smooth, physics-based transitions.
在本文中,我们将探索React的最佳动画框架之一: React Spring 。 您将学习将组件样式更改为平滑的,基于物理的过渡的一些基础知识。
先决条件 (Prerequisites)
React Spring has both a hooks-based and a component-based API, we’ll be exclusively looking at using hooks with basic state for all our animations. So if you need some brushing up on React Hooks, I recommend this article.
React Spring同时具有基于钩子和基于组件的API,我们将专门针对所有动画使用具有基本状态的钩子。 因此,如果您需要对React Hooks进行一些梳理,我建议您阅读本文 。
安装与设定 (Installation and Setup)
Of course, we’re going to need react-spring, and we can just use Create React App to get started.
当然,我们将需要react-spring,我们可以使用Create React App来开始。
$ npx create-react-app react-spring-example
$ cd react-spring-example
$ npm i react-spring
从和到 (From and To)
In our App.js
file we’re going to need useSpring
and animated
from react-spring.
在我们的App.js
文件中,我们将需要useSpring
和来自react-spring的 animated
。
useSpring
is a custom hook that we can set our style to, it takes an object with the from
and to
values as the start and end states while react-spring handles the transition between them. from
and to
can take objects of almost every css property: color, size, transform, and even our scrollbar. To apply our spring animation, we just need to add animated
onto our HTML tags and pass our animation to our style. By default this is run as soon as the component is mounted.
useSpring
是一个自定义钩子,我们可以将其设置为样式,它使用一个对象,该对象的from
和