react react-transition-group

使用CSSTransition实现动画,一共分三步:

1.引用CSSTransition

 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>

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:出场动画的效果

你可能感兴趣的:(笔记,react.js,动画,css3)