react 淡入淡出_如何在React with GSAP中创建可重复使用的淡入淡出动画组件

react 淡入淡出

If you haven't heard about or used GSAP, you're missing out. GSAP is an animation library for components and elements. Their homepage shows a lot of awesome animations you can make with the tool.

如果您没有听说过或未使用过GSAP，那么您就错过了。 GSAP是组件和元素的动画库。 他们的主页显示了您可以使用该工具制作的许多很棒的动画。

GSAP has a lot of configurations, and there's no one right way to achieve one type of animation. So we'll be looking at one way (opinionated) of creating a 'Fade In' animation when a component loads.

GSAP有很多配置，没有一种实现一种动画的正确方法。 因此，我们将研究在组件加载时创建“淡入”动画的一种方法(有针对性)。

This article won't be going into detail about how to use GSAP. Their documentation is the go-to resource if you want an in-depth guide to learn the tool.

本文将不详细介绍如何使用GSAP。 如果您想要深入的指南来学习该工具，那么他们的文档是首选资源。

我们要制作动画的东西 (What we're going to animate)

Here's a little description of what we're going to animate:

这是我们要制作动画的一些描述：

It's something simple. When a component is loaded (wherever), it fades in. We'll also add direction so that the component fades in from area to the normal position.

这很简单。 加载组件(无论在何处)时，它都会淡入。我们还将添加方向，以便组件从区域淡入到正常位置。

We'll also make the animation component reusable so that we can apply it to different elements.

我们还将使动画组件可重用，以便将其应用于不同的元素。

让我们开始吧！ (Let's get started!)

GSAP安装 (GSAP installation)

First, you must have a react project set up. create-react-app is there for you if you need to quickly set one up for this project.

首先，您必须设置一个react项目。 如果您需要为此项目快速设置一个create-react-app ，则可以使用它。

To install GSAP, enter the following command in your termina