react-transition-group v2 用法概述

  • Z时代
  • 2024-01-10
  • 分类：综合

react

官方文档地址：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-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>

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

 

以上是 react-transition-group v2 用法概述 的全部内容， 来源链接： utcz.com/z/382531.html

回到顶部