Chuckie's Blog

React Transition Group

发表于 更新于 分类于 ，
本文字数： 2k 阅读时长 ≈ 2 分钟

React Transition Group

React Transition Group是用于帮助React实现动画效果

  • 安装

    1
    npm install react-transition-group --save

1 CSSTransition

  1. 导入CSSTrasition

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

  2. 设置属性

    • 用<CSSTransition>标签包裹需要设置动画的标签
    • in : 绑定控制动画效果切换的属性 this.state.show的值在true和false之间切换来控制动画效果
    • timeout: 动画持续的时间
    • classNames : 动画的class名 与.css中样式类名一致
    • unmountOnExit : 动画出场即fade-exit-done样式效果结束后 直接将标签移除掉（若没有该属性 只是不显示标签 标签的位置任然占有）
    • onEntered : 钩子函数 还有很多不同时刻的钩子函数 具体查看官网文档
    • appear ： 值为true时 第一次显示标签是也有动画效果 需要在.css文件中设置相关样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <CSSTransition
        in = {this.state.show}
        timeout  = {1000}
        classNames = 'fade'
        unmountOnExit
        onEntered = {(el) => {el.style.color = 'blue'}}
        appear = {true}
        >
        <h1>hello world</h1>
    </CSSTransition>

  3. 设置样式

    • fade : 对应属性classNames = 'fade'
    • appear的三个样式类：对应属性appear = {true}
    • enter的三个样式类：入场样式动画
    • exit的三个样式类：出场样式动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .fade-appear, .fade-enter{
      opacity: 0 ;
    }

    .fade-appear-active, .fade-enter-active{
      opacity: 1;
      transition: opacity 1s ease-in;
    } 

    .fade-appear-done , .fade-enter-done{
      opacity: 1 ;
    }

    .fade-exit{
      opacity: 1 ;
    }

    .fade-exit-active{
      opacity: 0;
      transition: opacity 1s ease-in;
    }

    .fade-exit-done{
      opacity: 0;
    }

2 TransitionGroup

  • TransitionGroup官方使用教程

  • CSSTransition只能实现单个标签的动画效果，如果要实现一组标签都有动画效果（遍历的标签）则要用<TransitionGroup>标签将整个遍历的内容包裹

  • 使用流程：

  1. 导入CSSTransition, TransitionGroup

    1
    import {CSSTransition, TransitionGroup} from 'react-transition-group'

  2. 对遍历的单个标签执行上面关于CSSTransition的属性设置和样式设置

  3. 用TransitionGroup包裹遍历的所有内容

  • 案例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <TransitionGroup>
    	{ 
        	this.state.list.map((item, index) => {  
              return ( 
                <CSSTransition
                    in = {this.state.show}
                    timeout  = {1000}
                    classNames = 'fade'
                    unmountOnExit
                    onEntered = {(el) => {el.style.color = 'blue'}}
                    appear = {true}
    				key = {index}
                  >
                    <TodoItem />    //遍历的单标签
                  </CSSTransition>
              )
            }
    	}
    </TransitionGroup>