反应JS | 过渡组

概述

过渡组件是用于在 React 应用程序中添加过渡效果的组件。它基于类似于 CSS3 过渡的思想。这使得过渡组件具有很高的灵活性和可配置性。

安装

要使用过渡组件，需要安装 react-transition-group 包。

可以通过以下命令进行安装：

npm install react-transition-group --save

或者，如果使用的是 Yarn 包管理器，则可以使用以下命令安装：

yarn add react-transition-group

示例

下面是一个用于显示如何使用过渡组件的简单示例：

import { CSSTransition } from 'react-transition-group';

const Fade = ({ children, ...props }) => (
  <CSSTransition
    {...props}
    timeout={500}
    classNames="fade"
  >
    {children}
  </CSSTransition>
);

const App = () => (
  <div>
    <button onClick={() => setShow(!show)}>
      {show ? 'Hide' : 'Show'}
    </button>
    <Fade in={show}>
      <div className="my-element">
        Hello, world!
      </div>
    </Fade>
  </div>
);

在这个示例中，我们定义了一个名为 Fade 的组件，它是基于 CSSTransition 组件创建的。当 in 属性为 true 时，这个组件会将其包含的子组件使用 fade CSS 类名添加到 DOM 中，并通过过渡效果消失。

过渡状态

在 CSSTransition 组件中，我们可以使用不同的 CSS 类名来表示不同的过渡状态。以下是可用的 CSS 类名：

• enter: 当子元素第一次进入时添加。
• enter-active: 进入过渡状态时添加。这个类可以用于定义过渡的持续时间、延迟时间、动画方式等。
• enter-done: 过渡结束时添加。
• exit: 当子元素准备离开时添加。
• exit-active: 离开过渡状态时添加。同样，这个类可以用于定义过渡的持续时间、延迟时间、动画方式等。
• exit-done: 过渡完成时添加。

要使用这些类名，我们需要在 CSS 中定义它们，并将它们应用于相关元素。

以下是一个可用于在元素进入和离开时使用不同背景颜色的示例：

.fade-enter {
  opacity: 0;
  background: yellow;
}

.fade-enter-active {
  opacity: 1;
  background: green;
  transition: opacity 500ms, background-color 500ms;
}

.fade-exit {
  opacity: 1;
  background: green;
}

.fade-exit-active {
  opacity: 0;
  background: yellow;
  transition: opacity 500ms, background-color 500ms;
}

注意，在这个示例中，我们同时对不透明度和背景颜色定义了过渡效果。

属性

以下是 CSSTransition 组件可用的主要属性：

in

• 类型：boolean
• 是否启用过渡效果。

timeout

• 类型：number | { enter?: number, exit?: number }
• 过渡效果持续时间，单位为毫秒。
• 如果提供一个对象，则可以分别为进入和离开定义持续时间（例如，{ enter: 500, exit: 250 }）。

classNames

• 类型：string | { enter?: string, exit?: string, active?: string }
• CSS 类名的前缀。
• 如果提供一个对象，则可以分别为进入、离开和活跃阶段定义前缀（例如，{ enter: 'fade-enter', exit: 'fade-exit', active: 'fade-enter-active' }）。

onEnter

• 类型：(node: HTMLElement, appearing: boolean) => void
• 进入过渡效果时调用的回调函数。
• node 参数是正在添加过渡效果的元素的 DOM 节点。
• appearing 参数指示元素是否正在第一次出现。

onEntering

• 类型：(node: HTMLElement, appearing: boolean) => void
• 进入过渡效果期间调用的回调函数。
• node 和 appearing 参数与 onEnter 中的相同。

onEntered

• 类型：(node: HTMLElement, appearing: boolean) => void
• 进入过渡效果完成时调用的回调函数。
• node 和 appearing 参数与 onEnter 中的相同。

onExit

• 类型：(node: HTMLElement) => void
• 离开过渡效果时调用的回调函数。
• node 参数是正在添加过渡效果的元素的 DOM 节点。

onExiting

• 类型：(node: HTMLElement) => void
• 离开过渡效果期间调用的回调函数。
• node 参数与 onExit 中的相同。

onExited

• 类型：(node: HTMLElement) => void
• 离开过渡效果完成时调用的回调函数。
• node 参数与 onExit 中的相同。

总结

过渡组件提供了在 React 应用程序中添加过渡效果的一种简单方法。它的灵活性和可配置性使得可以为不同的元素和状态定制不同的过渡效果。