react之路： react过渡动画（react-transition-group）

蒲粤山

github仓库地址：https://github.com/wanghao12345/react-book

这里主要讲解使用react-transition-group里面的CSSTransition实现动画。

使用CSSTransition实现动画，一共分三步：

1.引用CSSTransition

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

2.使用CSSTransition将需要动画的元素包裹起来

1 <CSSTransition
2       in={this.state.focused}
3       timeout={200}
4       classNames='slide'
5 >
6     ........
7  </CSSTransition>
8 
9                        

in: 一个是否执行动画的标准，当in的值为true就开始执行入场动画，in的值为false就开始执行出场动画

timeout: 执行一个动画的时间

classNames:动画的class名称，为了描述具体动画做准备

3.样式描述动画效果

 1 .slide-enter {
 2     transition: all .2s ease-out;
 3 }
 4 .slide-enter-active {
 5     width: 240px;
 6 }
 7 .slide-exit {
 8     transition: all .2s ease-out;
 9 }
10 .slide-exit-active {
11     width: 160px;
12 }

.xxx-enter：入场动画过渡参数设置

.xxx-enter-active ：入场动画的效果

.xxx-exit：出场动画的过渡参数设置

.xxx-exit-active：出场动画的效果

注意：xxx为第二步定义的CSSTransition的className

 

来源：https://www.cnblogs.com/wanghao123/p/11152005.html