React簡書開發實戰課程筆記——2
阿新 • • 發佈:2018-12-11
筆記繼續…
1、使用 react-transition-group 擴充套件,實現css動畫
- 安裝:
npm install react-transition-group --save
1.使用CSSTransition
控制單個元素執行動畫:
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={this.state.xxx} //this.state.xxx資料改變時執行動畫
timeout={1000} //動畫執行時間
classNames='fade' //類名字首
unmountOnExit //加上這個屬性,會在出場動畫執行完畢時,移除這個DOM
//鉤子函式 //只寫出一個作為舉例
onEntered={(e) => { //onEntered在入場動畫執行完時執行(e代表被包裹的DOM元素,可以換成其他字元)
e.style.color = 'blue';
}}
appear={true} //當頁面第一次渲染時,執行一次入場動畫(需要增加appear類)
>
<h1>Hello World</h1>
</CSSTransition>
需要寫的css類如下:
.fade-enter, .fade-appear {} //入場動畫剛開始
.fade-enter-active, .fade-appear-active {} //入場動畫執行過程
.fade-enter-done {} //入場動畫執行完畢
.fade-exit {} //出場動畫剛開始
.fade-exit-active {} //出場動畫執行過程
.fade-exit-done {} //出場動畫執行完畢
其中.fade-appear
類和.fade-appear-active
類是上面appear={true}
時才需要新增的。fade
就是上面指定的類名字首
所有的鉤子函式如下:
onEnter //入場動畫剛開始時執行
onEntering //入場動畫執行時執行
onEntered //入場動畫執行完時執行
onExit //出場動畫剛開始時執行
onExiting //出場動畫執行時執行
onExited //出場動畫執行完時執行
2.配合TransitionGroup
來實現操作多個DOM元素執行動畫
import { TransitionGroup } from 'react-transition-group';
<TransitionGroup>
{
this.state.list.map((item, index) => {
return (
<CSSTransition
//這裡CSSTransition就不需要in屬性了,其他屬性同上
>
<h1>{item}</h1>
</CSSTransition>
);
});
}
</TransitionGroup>
有錯誤或不足歡迎指正~
待續…