14. react-transition-group实现过渡动画

在 react 中通过使用 react-transition-group 实现过渡动画

CSSTransition

• in：触发进入或者退出状态
• 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
• 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class， 并且添加-enter-done的class；
• 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并 且添加-enter-done的class；
• classNames：动画class的名称，决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
• timeout: 控制class添加和删除的时间。动画的时间是由CSS控制。
• appear： 是否在初次进入添加动画（需要和in同时为true）
• unmountOnExit：退出后卸载组件
• CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作
  • onEnter：在进入动画之前被触发；
  • onEntering：在应用进入动画时被触发；
  • onEntered：在应用进入动画结束后被触发；

示例

import {useState} from 'react'
import {CSSTransition} from 'react-transition-group'
const CSSTransitionComponent = () => {
  const [inProp, setInProp] = useState(true);
  return (
    <div>
      <button type="button" onClick={() => setInProp(!inProp)}>
        Click to Enter
      </button>
      <CSSTransition 
        appear 
        in={inProp} 
        timeout={200} 
        classNames="my-node" 
        unmountOnExit={true}>
        <div>
          "I'll receive my-node-* classes"
        </div>
      </CSSTransition>
    </div>
  );
}
export default CSSTransitionComponent

.my-node-enter, .my-node-appear {
  opacity: 0;
}
.my-node-enter-active, .my-node-appear-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}
.my-node-exit-done {
  opacity: 0;
}

SwitchTransition

SwitchTransition 用于两个组件的切换

const SwitchDemo = () => {
  const [state, setState] = useState(false)
  return (
    <div>
    <SwitchTransition>
     <CSSTransition
       key={state ? "Goodbye, world!" : "Hello, world!"}
       addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
       classNames='fade'
     >
       <button onClick={() => setState(state => !state)}>
         {state ? "Goodbye, world!" : "Hello, world!"}
       </button>
     </CSSTransition>
   </SwitchTransition>
    </div>
  )
}
export default SwitchDemo

.fade-enter{
  opacity: 0;
  transform: translateX(100%);
}
.fade-exit{
  opacity: 1;
  transform: translateX(0);
}
.fade-enter-active{
  opacity: 1;
  transform: translateX(0);
}
.fade-exit-active{
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active,
.fade-exit-active{
  transition: opacity 500ms, transform 500ms;
}

TransitionGroup

TransitionGroup用来给一组组件添加动画，比如列表的添加和删除

import React, { PureComponent } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './TransitionGroup.css';
export default class TransitionGroupDemo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      names: ["coderwhy", "kobe", "lilei"]
    }
  }
  render() {
    return (
      <div>
        <TransitionGroup>
          {
            this.state.names.map((item, index) => {
              return (
                <CSSTransition key={item}
                  timeout={500}
                  classNames="item">
                  <div>
                    {item}
                    <button onClick={e => this.removeItem(index)}>-</button>
                  </div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={e => this.addName()}>+name</button>
      </div>
    )
  }
  addName() {
    this.setState({
      names: [...this.state.names, "coderwhy"]
    })
  }
  removeItem(index) {
    // index indey indez
    this.setState({
      names: this.state.names.filter((item, indey) => index !== indey)
    })
  }
}

.item-enter {
  opacity: 0;
  transform: scale(.6);
}
.item-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}
.item-enter-done {
  color: red;
}
.item-exit {
  opacity: 1;
  transform: scale(1);
}
.item-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: opacity 300ms, transform 300ms;
}
.item-exit-done {
  opacity: 0;
}

具体使用参看官方文档即可