spring react_使用React Spring在React中介绍动画

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值