【笔记】React的过动画

前言

通过react-transition-group实现React的动画

下载依赖

npm install react-transition-group

CSSTransition

• 显示与隐藏的动画

in：值为true时，组件显示，值为false时，组件隐藏
timeout：指定动画类名持续时间，单位毫秒

timeout={ 1000 }：统一设置appear、enter、leave的类名持续时间
timeout={ { appear: 1000, enter: 1000, leave: 1000 } }：分别设置appear、enter、leave的类名持续时间

classNames：指定动画类名
unmountOnExit：值为true时，组件隐藏时，组件会自动销毁
appear：首次渲染时执行动画

src/Component.jsx

import React from "react";
import "./transition.css";
import { CSSTransition } from "react-transition-group";

class Component extends React.Component {
  render() {
    return (
      <CSSTransition
        in={ true }
        timeout={ 1000 }
        classNames="v"
        unmountOnExit={ true }
        appear={ true }
      >
        <div></div>
      </CSSTransition>
    );
  }
}

src/transition.css

.n-appear { /* 首次进入开始样式 */
  opacity: 0;
}
.n-appear-active { /* 首次进入进行中样式 */
  opacity: 1;
  transition: opacity 1s ease;
}
.n-enter { /* 进入开始样式 */
  opacity: 0;
}
.n-enter-active { /* 进入进行中样式 */
  opacity: 1;
  transition: opacity 1s ease;
}
.n-exit { /* 离开开始样式 */
  opacity: 1;
}
.n-exit-active { /* 离开进行中样式 */
  opacity: 0;
  transition: opacity 1s ease;
}

过渡动画事件

onEnter：指定进入动画事件回调函数
onEntering：指定进入动画进行中事件回调函数
onEntered：指定进入动画结束事件回调函数
onExit：指定离开动画事件回调函数
onExiting：指定离开动画进行中事件回调函数
onExited：指定离开动画结束事件回调函数

import React from "react";
import { CSSTransition } from "react-transition-group";

class Component extends React.Component {
  constructor() {
    super();

    this.fn = this.fn.bind(this);
  }

  fn() {
    ...
  }

  render() {
    return (
      <CSSTransition
        onEnter={ this.fn }
        onEntering={ this.fn }
        onEntered={ this.fn }
        onExit={ this.fn }
        onExiting={ this.fn }
        onExited={ this.fn }
      >
        <div></div>
      </CSSTransition>
    );
  }
}

SwitchTransition

• 两个组件切换的动画
• SwitchTransition需要配合CSSTransition使用

mode：指定组件切换的模式

out-in：组件切换时，先离开，再进入
in-out：组件切换时，先进入，再离开

src/Component.jsx

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

class Component extends React.Component {
  constructor() {
    super();

    this.state = {
      flag: true
    };
  }

  render() {
    return (
      <SwitchTransition mode="out-in">
        <CSSTransition
          key={ this.state.flag }
          timeout={ 1000 }
          classNames="v"
        >
          <div></div>
        </CSSTransition>
      </SwitchTransition>
    );
  }
}

src/transition.css

.n-enter { /* 进入开始样式 */
  opacity: 0;
}
.n-enter-active { /* 进入进行中样式 */
  opacity: 1;
  transition: opacity 1s ease;
}
.n-exit { /* 离开开始样式 */
  opacity: 1;
}
.n-exit-active { /* 离开进行中样式 */
  opacity: 0;
  transition: opacity 1s ease;
}

TransitionGroup

• 批量组件切换的动画
• TransitionGroup需要配合CSSTransition使用

component：指定最外层包裹的组件

div：缺省值，使用<div></div>进行包裹

src/Component.jsx

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

class Component extends React.Component {
  constructor() {
    super();

    this.state = {
      arr: []
    };
  }

  render() {
    return (
      <TransitionGroup component={ "ul" }>
        <CSSTransition
          timeout={ 1000 }
          classNames="v"
        >
          {
            this.state.arr.map((item, index) => {
              return (
                <li key={ item.id }>{ item }</li>
              );
            });
          }
        </CSSTransition>
      </TransitionGroup>
    );
  }
}

src/transition.css

.n-enter { /* 进入开始样式 */
  opacity: 0;
}
.n-enter-active { /* 进入进行中样式 */
  opacity: 1;
  transition: opacity 1s ease;
}
.n-exit { /* 离开开始样式 */
  opacity: 1;
}
.n-exit-active { /* 离开进行中样式 */
  opacity: 0;
  transition: opacity 1s ease;
}

解决严格模式下报错的问题

import React from "react";
import { CSSTransition } from "react-transition-group";

class Component extends React.Component {
  constructor() {
    super();

    this.sectionRef = React.createRef();
  }

  render() {
    return (
      <CSSTransition
        nodeRef={ this.sectionRef }
      >
        <div ref={ this.sectionRef }>
          { this.state.flag }
        </div>
      </CSSTransition>
    );
  }
}

完成