1. 程式人生 > >React簡書開發實戰課程筆記——2

React簡書開發實戰課程筆記——2

筆記繼續…

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>

有錯誤或不足歡迎指正~

待續…