React Transition Group

参考资料

• 官网

Installation

# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group

CSSTransition

单个dom元素的动画

// JSX
import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={this.state.show}
  timeout={300}
  classNames="fade"
  unmountOnExit
  onEnter={(el) => {el.style.color='blue'}}
  onExited={(el) => {el.style.color='yellow'}}
  appear={true}
>
	<div>hello</div>
</CSSTransition>

// CSSTransiton包裹的标签
// in 负责把this.state.show传给被包裹的标签
// timeout 动画执行的时长
// classNames 不写默认是fade，可自定义
// unmountOnExit 执行动画的时候DOM的添加和删除
// appear hello第一次出现在页面的时候也要动画效果 class为fade-appear,fade-appear-active
// onEnter 、 onExited钩子函数，在js里操作css

// CSS
CSSTransition会自动的给被包裹的标签添加class名称和样式
.fade-enter,.fade-appear { // 入场动画执行的第一个时刻添加,还没有入场
  opacity: 0;
}
.fade-enter-active,.fade-appear-active { // 入场动画执行的第二个时刻到入场动画执行完成之前的时刻添加
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done { // 入场动画执行完成之后添加
  opacity: 1;
}
.fade-exit { // 出场动画执行的第一个时刻
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done {

}

TransitionGroup

多个dom元素的动画

import { TransitionGroup } from 'react-transition-group';

<TransitionGroup>
	{
  	this.state.list.map((item, index) => {
    	return ( 
      	<CSSTransition
          // 外层TransitionGroup，内层CSSTransition，此时不用in属性
          timeout={300}
          classNames="fade"
          unmountOnExit
          onEnter={(el) => {el.style.color='blue'}}
          onExited={(el) => {el.style.color='yellow'}}
          appear={true}
          key={index}
        >
          <div>{item}</div>
        </CSSTransition>
      )
    })
  }
</TransitionGroup>