react-transition-group v2 用法概述

官方文檔地址：https://reactcommunity.org/react-transition-group/

在react-transition-group v2中，暴露了三個組件：

• Transition
• CSSTransition
• TransitionGroup

其中最重要的是CSSTransition，TransitionGroup用於列表項的過渡動畫，掌握了CSSTtransition後很快就能上手。

CSSTransition組件中較爲重要的api有：

• in：bool，控制組件顯示與隱藏，true顯示，false隱藏

• timeout：number，延遲，涉及到動畫狀態的持續時間。可傳入一個對象，如{exit:300,enter:500}來分別設置進入和離開的延時

• classNames：string，動畫進行時給元素添加的類名。通常利用這個屬性來設計動畫。這裏要特別注意是classNames而不是className

• unmountOnExit：bool，爲true時組件爲隱藏狀態時移除組件，爲false時組件保持動畫結束時的狀態而不移除元素。通常要設成true。

• appear：bool，爲false時當CSSTransition控件加載完畢後不執行動畫，爲true時控件加載完畢則當即執行動畫。demo：https://codepen.io/phsantiago/pen/WdNLmm

動畫進行時，以classNames='fade'爲例，將依次爲要執行動畫的元素添加如下類名：

fade-enter, fade-enter-active, fade-enter-done, fade-exit, fade-exit-active, fade-exit-done

咱們也能夠單獨指定每個類名：

 classNames={{
     enter: 'my-enter',
     enterActive: 'my-active-enter',
     enterDone: 'my-done-enter,
     exit: 'my-exit',
     exitActive: 'my-active-exit',
     exitDone: 'my-done-exit,
}}

這裏來逐個講解一下每一個類名的添加時機：

• enter：當元素進入時添加
• enter-active：當元素進入到頁面後添加。與enter的主要差異是enter-active是在元素已經添加到頁面後纔會添加enter-active，而enter在元素添加到頁面時已經攜帶。
• enter-done：動畫執行完畢後添加。動畫時長取決於timeout
• exit：元素離開時添加。離開動畫時長取決於timeout
• exit-active：同exit
• exit-done：離開動畫完成後添加。（僅在unmountOnExit爲false時有效）

官方文檔上還提到一個appear和appear-active，因爲用處不大這裏就不講解了。通常的動畫使用enter-active和enter-done就基本夠用了。

案例：

        <CSSTransition
          in={isOpen}
          timeout={3000}
          classNames={'mask'}
          unmountOnExit={true}
        >
            <div key={1} className={style.mask}/>  //全部要執行動畫的元素必須攜帶key
        </CSSTransition>

 

其餘的用法及案例請參照官方文檔。