使用react-transition-group完成搜索框的簡單動畫效果
1. 首先下載引入react-transition-group，npm install react-transition-group --save 悉默，使用yarn的同學(xué)輸入 yarn add react-transition-group來下載月腋。
在需要使用的頁面引入CSSTransition模塊踪古，import { CSSTransition } from 'react-transition-group'
2.?將CSSTransition標(biāo)簽包裹在需要實(shí)現(xiàn)動畫效果的元素外，然后進(jìn)行相關(guān)屬性的配置：
3.?如果this.state.focused從false變?yōu)閠rue，則動畫入場溜腐，反之out出場,觸發(fā)進(jìn)入或退出狀態(tài)默認(rèn)是false,我們通過input輸入框的獲取焦點(diǎn)和失去焦點(diǎn)來改變his.state.focused的屬性值。
在CSSTransition的屬性中。timeout 動畫執(zhí)行的持續(xù)時間怪蔑，以毫秒為單位地来，設(shè)置的為200毫秒。classNames為slide望众，自定義的class名。
4.一旦動畫入場伞辛，插件將會自動的在包裹住的標(biāo)簽上添加很多css樣式烂翰，默認(rèn)class名是slide，所以我們需要給CSSTransition標(biāo)簽加上classNames='slide'蚤氏，然后去css文件進(jìn)行配置：
enter是入場前的剎那;? enter-active指入場后到入場結(jié)束的過程; exit是退出動畫甘耿；
5.實(shí)現(xiàn)的效果如下，獲取焦點(diǎn)的時候出現(xiàn)動畫竿滨，input輸入框改變長度棵里，退出時候也有相應(yīng)的動畫。
