ReactJS - 动画：让您的组件生动起来

你好，未来的React动画大师们！我很高兴能成为您在这激动人心的ReactJS动画世界中的向导。作为一个教计算机科学多年的老师，我可以告诉您，动画就像是秘密酱汁，让您的应用程序不仅功能齐全，而且非常愉悦。那么，让我们跳进去，让这些组件跳起舞吧！

React Transition Group的魔法

在我们开始玩转动画之前，让我们先了解一下React Transition Group。把它想象成一个装满巧妙小工具的工具箱，帮助我们创建应用程序中平滑、吸引眼球的过渡效果。

安装React Transition Group

首先，我们需要邀请React Transition Group加入我们的项目派对。打开您的终端并输入：

npm install react-transition-group

或者如果您是yarn的粉丝：

yarn add react-transition-group

太棒了！现在我们在指尖上拥有了动画的超能力。

Transition：动画的基石

Transition组件就像是房子的地基。它为我们构建动画提供了一个坚实的基础。让我们通过一个简单的例子来看看它是如何工作的：

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

const FadeInOut = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
我是一个渐变的文本！
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
点击以渐变
</button>
</div>
);
};

让我们分解一下：

1. 我们从'react-transition-group'中导入Transition。
2. 我们设置了一些样式：一个defaultStyle作为我们的初始状态，以及transitionStyles用于不同阶段的过渡。
3. 我们的FadeInOut组件使用状态inProp来控制可见性。
4. Transition组件接受两个主要属性：in（我们的可见性状态）和timeout（动画的持续时间）。
5. 在Transition内部，我们使用一个函数接收当前的过渡状态并应用相应的样式。

当您点击按钮时，您会看到文本平滑地淡入和淡出。魔法，对吧？

CSSTransition：当CSS遇见React

现在，让我们升级我们的游戏，使用CSSTransition。它是Transition的更酷的兄弟，可以无缝地与CSS类一起工作。这里有一个有趣的例子：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // 我们稍后创建这个

const Superhero = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
我是一个超级英雄！
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
变身！
</button>
</div>
);
};

这是我们的CSS（在styles.css中）：

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

这里发生了什么：

1. 我们使用CSSTransition而不是Transition。
2. 我们指定classNames="super"，告诉React使用像super-enter、super-enter-active等类。
3. 我们的CSS定义了组件在每个过渡阶段应该看起来如何。

当您点击"变身！"时，我们的超级英雄会以缩放效果戏剧性地出现和消失。就像在浏览器中观看超级英雄电影一样！

TransitionGroup：处理多个过渡

最后但并非最不重要的是，让我们来谈谈TransitionGroup。它就像乐队中的指挥，同时管理多个过渡。这里有一个实际的例子：

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="输入一个任务"
/>
<button onClick={addItem}>添加</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

相应的CSS（list-styles.css）：

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

这个例子创建了一个简单的待办事项列表，其中项目在添加时淡入，在删除时淡出。这里是分解：

1. 我们使用TransitionGroup来包装我们的项目列表。
2. 每个项目都被包装在CSSTransition中。
3. 当项目被添加或删除时，TransitionGroup自动管理过渡。

结果呢？一个平滑、专业的待办事项列表，任何项目经理都会为之骄傲！

结束语

就这样，伙计们！我们一起穿越了React动画的土地，从基本的Transition到强大的TransitionGroup。记住，动画不仅仅是为了让东西看起来漂亮（尽管这是一个很好的额外收获），它们还创造了直观、响应式的界面，引导用户通过您的应用程序。

这里是一个我们覆盖的方法的快速参考表：

组件	用例	关键属性
Transition	基本过渡	in, timeout
CSSTransition	基于CSS的过渡	in, timeout, classNames
TransitionGroup	管理多个过渡	component（可选）

现在，去 forth 和动画化吧！记住，能力越大，责任越大。明智地使用动画，用户会感谢您的。快乐编码！

Credits: Image by storyset