React Transition Group官方过渡动画的使用

react官方提供了React Transition Group这个动画框架供开发者使用。https://reactcommunity.org/react-transition-group/

安装

npm install react-transition-group --save

引入

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

虽然是动画框架，但是还是要写动画样式的。

新建css文件并引入

.item-enter,.item-appear {
  opacity: 0;
}
.item-enter-active,.item-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}
.item-enter-done{
  opacity: 1;
}
.item-exit {
  opacity: 1;
}
.item-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.item-exit-done{
  opacity: 0;
}

import './style.css'

动画分为单个dom的动画和列表的动画操作略有差异

单个dom的动画如下，每个属性的对应的作用如下

<CSSTransition
          in={this.state.inputValue === ''}//动画开始的标志
          timeout={1000}//动画的时间
          classNames="item"//对应css名字中的第一个单词
          unmountOnExit//动画结束后dom被移除
          appear={true}//第一次展示到页面也有动画效果，并且css样式中要加入appear对应的样式名
          onEntered={(el) => {el.style.color="red"}}//入场动画执行结束要做的操作
        >
          <div>hello</div>
        </CSSTransition>

列表动画需要在单个dom的基础上多包裹一层TransitionGroup，通过事件改变增加state的list数组来更新视图，添加的数组成员都有相应的动画效果。

<TransitionGroup>      
          {
            this.state.list.map(function (item,index) {
              return (
                <CSSTransition
                  key={index}
                  timeout={1000}//动画的时间
                  classNames="item"//对应css名字中的第一个单词
                  unmountOnExit//动画结束后dom被移除
                  appear={true}//第一次展示到页面也有动画效果，并且css样式中要加入appear对应的样式名
                  onEntered={(el) => {el.style.color="red"}}//入场动画执行结束要做的操作
                >
                  <div>hello</div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>