react-transition-group简单动画效果

使用react-transition-group完成搜索框的简单动画效果

1. 首先下载引入react-transition-group，npm install react-transition-group --save ，使用yarn的同学输入 yarn add react-transition-group来下载。

在需要使用的页面引入CSSTransition模块，import { CSSTransition } from 'react-transition-group'

2. 将CSSTransition标签包裹在需要实现动画效果的元素外，然后进行相关属性的配置：

---

3. 如果this.state.focused从false变为true，则动画入场，反之out出场,触发进入或退出状态默认是false,我们通过input输入框的获取焦点和失去焦点来改变his.state.focused的属性值。

在CSSTransition的属性中。timeout 动画执行的持续时间，以毫秒为单位，设置的为200毫秒。classNames为slide，自定义的class名。

4.一旦动画入场，插件将会自动的在包裹住的标签上添加很多css样式，默认class名是slide，所以我们需要给CSSTransition标签加上classNames='slide'，然后去css文件进行配置：

---

enter是入场前的刹那;  enter-active指入场后到入场结束的过程; exit是退出动画；

5.实现的效果如下，获取焦点的时候出现动画，input输入框改变长度，退出时候也有相应的动画。