反应过渡组 - Javascript

React Transition Group 是一个React组件库，提供了几个组件用于处理CSS过渡和动画效果，可以使React组件在某些状态发生改变时执行动画效果，如组件出现时、组件更新时或组件消失时。

安装

通过npm安装：

npm install react-transition-group --save

或通过yarn：

yarn add react-transition-group

使用

React Transition Group 有以下几个组件：

• Transition
• CSSTransition
• SwitchTransition
• TransitionGroup

Transition组件

Transition组件是最基本的过渡组件，它接受一个in属性和一个timeout属性，用于判断组件是否处于过渡状态和过渡效果的时间长度。

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

const Fade = ({children, ...props}) => {
  const [inProp, setInProp] = useState(false);
  
  return (
    <Transition in={inProp} timeout={500}>
      {state => (
        <div style={{
          transition: 'opacity 0.5s ease-out',
          opacity: state === 'exiting' ? 0 : 1
        }}>
          {children}
        </div>
      )}
    </Transition>
  )
}

CSSTransition组件

CSSTransition组件是在Transition组件基础上扩展而来的，它通过向子组件添加className实现过渡动画效果。

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

const Fade = ({children, ...props}) => {
  const [inProp, setInProp] = useState(false);
  
  return (
    <CSSTransition in={inProp} timeout={500} classNames='fade'>
      <div>
        {children}
      </div>
    </CSSTransition>
  )
}

SwitchTransition组件

SwitchTransition组件可以用于在两个组件之间切换过渡效果，它可以像React的<Transition>组件一样进行自定义的过渡动画效果，只是它接受in属性值为true或false的两个子组件进行切换。

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

const Fade = ({children, ...props}) => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => setIsOn(!isOn);

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <SwitchTransition>
        <CSSTransition key={isOn ? 'on' : 'off'} classNames='fade' timeout={500}>
          <div>
            {isOn ? <h1>On</h1> : <h1>Off</h1>}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  )
}

TransitionGroup组件

TransitionGroup组件是用于多个组件过渡效果的情况，它可以将多个子组件包含在内，实现一次性过渡效果。

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

const Fade = ({ items, onRemove }) => {
  return (
    <TransitionGroup>
      {items.map(item => (
        <CSSTransition key={item.id} timeout={500} classNames='fade'>
          <div>
            {item.text}
            <button onClick={() => onRemove(item)}>Remove</button>
          </div>
        </CSSTransition>
      ))}
    </TransitionGroup>
  )
}

以上就是React Transition Group的基本使用，组件之间的过渡效果可以通过CSS样式自定义实现。