Skip to main content

React Transition Group

React Transition Group 是 React 官方提供的组件过渡动画库。

一、安装​

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

React Transition Group 提供了 4 个组件：

  • Transition
  • CSSTransition
  • SwitchTransition
  • TransitionGroup

其中，最常用的是 CSSTransition（动画进入退出组件）

二、CSSTransition​

1、基本用法​

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

function App() {
  const [showModal, setShowModal] = useState(false)
  return (
    <>
      <button onClick={() => setShowModal(!showModal)}>Switch Modal</button>
      <CSSTransition
        in={showModal}
        timeout={300}
        classNames="alert"
        unmountOnExit
        onEnter={(el) => console.log('开始进入', el)}
        onEntering={(el) => console.log('正在进入', el)}
        onEntered={(el) => console.log('完成进入', el)}
        onExit={(el) => console.log('开始退出', el)}
        onExiting={(el) => console.log('正在退出', el)}
        onExited={(el) => console.log('完成退出', el)}
      >
        <div className="modal">弹窗</div>
      </CSSTransition>
    </>
  )
}

export default App
styles.css
.modal {
  width: fit-content;
  padding: 20px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

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

运行效果：

2、CSSTransition 组件属性​

组件属性说明
in动画状态，默认为 false，表示动画进入（true）或退出（false）的触发过程
timeout动画执行时间，即 enter-active 到 enter-done 或 exit-active 到 exit-done 的执行时间
classNamescss 动画名称，这里定义的类名会被添加到 enter-xxx 及 exit-xxx 之前
unmountOnExit默认为 false，表示当 in 为 false 时 CSSTransition 中的元素不从 DOM 中移除，设为 true 则移除
mountOnEnter默认情况下，子组件与父转换组件一起立即挂载。如果想延迟挂载第一个 in={true} 上的组件，可以设置mountOnEnter。在第一次进入转换后，组件将保持挂载状态，直到指定 unmountOnExit
appear定义首次加载的动画，需要在 css 中添加对应的类名和样式，可与 enter 一致
enter启用或禁用 enter 转换
exit启用或禁用 exit 转换
addEndListener添加自定义转换结束触发器。使用正在转换的 DOM 节点和 done 回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时，仍将其用作回退
onEnter指定动画状态开始进入时触发的事件
onEntering指定动画状态正在进入时触发的事件
onEntered指定动画状态完成进入时触发的事件
onExit指定动画状态开始退出时触发的事件
onExiting指定动画状态正在退出时触发的事件
onExited指定动画状态完成退出时触发的事件

3、css 动画属性​

动画属性说明
.xxx-enter入场前加载动画
.xxx-enter-active入场后到入场结束的过程
.xxx-enter-done入场动画执行完毕后
.xxx-exit出场前加载动画
.xxx-exit-active出场后到入场结束的过程
.xxx-exit-done出场动画执行完毕后