用 React-Transition-Group 轻松打造顺畅过渡动画

2023-11-20 23:44:00

引言：

在构建用户界面时，流畅的过渡动画可以提升用户体验，让应用更具吸引力。React-Transition-Group 是 React 官方提供的组件库，专为处理过渡效果而设计。它提供了直观且高效的方式，让你轻松打造动态的 UI 交互。本文将带领你踏上 React-Transition-Group 的精通之旅，让你在短短 5 分钟内掌握其核心特性。

组件简介：

React-Transition-Group 由以下核心组件组成：

Transition： 管理单个元素的进入、离开和更新过渡。
CSSTransition： 提供基于 CSS 的过渡动画，可以自定义持续时间和缓动函数。
TransitionGroup： 管理一个元素组的进入、离开和更新过渡。
SwitchTransition： 管理同时只允许一个元素存在的过渡。

使用方法：

1. 安装组件库：

npm install react-transition-group

2. 创建过渡动画：

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

const MyComponent = () => {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>显示</button>
      <button onClick={() => setShow(false)}>隐藏</button>

      <Transition in={show} timeout={500}>
        {(state) => (
          <div style={{
            opacity: state === 'entering' ? 1 : 0,
            transition: 'opacity 500ms ease-in-out'
          }}>
            {state} - 元素显示状态
          </div>
        )}
      </Transition>
    </div>
  );
};

3. 基于 CSS 的过渡：

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

const MyComponent = () => {
  const [show, setShow] = useState(false);

  return (
    <div>
      <CSSTransition in={show} timeout={500} classNames="my-fade">
        <div>元素内容</div>
      </CSSTransition>
    </div>
  );
};

在 CSS 中定义过渡样式：

.my-fade-enter {
  opacity: 0;
  transform: scale(0.5);
}

.my-fade-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 500ms ease-in-out;
}

.my-fade-exit {
  opacity: 1;
  transform: scale(1);
}

.my-fade-exit-active {
  opacity: 0;
  transform: scale(0.5);
  transition: all 500ms ease-in-out;
}