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>

 

其余的用法及案例请参照官方文档。