React 动画

17 Mar 2025 | 4 分钟阅读

动画是一种图像处理技术，通过操纵图像使其看起来像在移动。它是制作交互式 Web 应用程序最常用的技术之一。在 React 中，我们可以使用一个显式的组件组添加动画，该组件组被称为 React Transition Group。

React Transition Group 是一个用于管理组件状态的附加组件，可用于定义进入和退出的过渡效果。它本身无法为样式设置动画。相反，它公开了过渡状态，管理类和组元素，并以有用的方式操作 DOM。这使得视觉过渡的实现变得更加容易。

React Transition group 主要有 两个 API 用于创建过渡效果。它们是

ReactTransitionGroup: 它用作动画的低级 API。
ReactCSSTransitionGroup: 它用作实现基本 CSS 过渡和动画的高级 API。

安装

我们需要安装 react-transition-group 才能在 React Web 应用程序中创建动画。您可以使用以下命令。

React Transition Group 组件

React Transition Group API 提供了三个主要组件。它们是

过渡
CSSTransition
Transition Group

过渡

它具有一个简单的组件 API，用于描述组件从一个状态到另一个状态随时间推移的过渡。它主要用于为组件的挂载和卸载设置动画。它也可以用于就地转换状态。

我们可以访问过渡组件的四种状态

进入 (entering)
已进入 (entered)
退出 (exiting)
已退出 (exited)

CSSTransition

CSSTransition 组件使用 CSS 样式表类来编写过渡效果并创建动画。它受到了 ng-animate 库的启发。它还可以继承过渡组件的所有 props。我们可以将 "CSSTransition" 分为三个状态。它们是

Appear（出现）
Enter 键
退出

CSSTransition 组件必须将一对类名应用于子组件。第一个类的形式为 name-stage，第二个类的形式为 name-stage-active。例如，您提供名称 fade，当它应用于“enter”阶段时，这两个类将是 fade-enter 和 fade-enter-active。它也可以将 Timeout 作为 prop，用于定义动画的最大时间。

TransitionGroup

此组件用于管理列表中一组过渡组件（Transition 和 CSSTransition）。它是一个状态机，可以控制组件在一段时间内的挂载和卸载。过渡组件不直接定义任何动画。在这里，'list' 项如何设置动画取决于单个过渡组件。这意味着，“TransitionGroup”组件可以在一个组件中具有不同的动画。

让我们看一下下面的示例，这将有助于您清楚地了解 React 动画。

示例

App.js

在 App.js 文件中，导入 react-transition-group 组件，并创建 CSSTransition 组件，该组件用作要设置动画的组件的包装器。我们将使用 transitionEnterTimeout 和 transitionLeaveTimeout 进行 CSS 过渡。当我们想要从列表中插入或删除元素时，将使用 Enter 和 Leave 动画。

import React, { Component } from 'react';
import { CSSTransitionGroup } from 'react-transition-group';

class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {items: ['Blockchain', 'ReactJS', 'TypeScript', 'JavaTpoint']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter Item Name')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
	<h1>Animation Example</h1>
            <button onClick={this.handleAdd}>Insert Item</button>
            <CSSTransitionGroup
               transitionName="example"
      	   transitionEnterTimeout={800}
               transitionLeaveTimeout={600}>
               {items}
            </CSSTransitionGroup>
      </div>
    );
  }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

style.css

在您的应用程序中添加 style.css 文件，并添加以下 CSS 样式。现在，要使用此 CSS 文件，您需要在 HTML 文件中添加此文件的链接。

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

在上面的示例中，动画持续时间在 CSS 和 render 方法中均已指定。它告诉 React 组件何时从列表中删除动画类，以及何时在离开时从 DOM 中删除该元素。

输出

当我们执行以上程序时，它将给出以下输出。

单击“插入项目”按钮，将显示以下屏幕。

插入项目并按下“确定”后，可以将新项目以淡入样式添加到列表中。在这里，我们也可以通过单击特定链接来删除列表中的任何项目。

下一个主题React Bootstrap

React 动画

安装

React Transition Group 组件

过渡

CSSTransition

TransitionGroup

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 动画

安装

React Transition Group 组件

过渡

CSSTransition

TransitionGroup

相关帖子

React Map

React Redux 示例

React 的优缺点

React 表格

React 路由器

React 功能

React 片段

React Refs

React 组件 API

React 组件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器