Why

动画是非常视觉化的效果,会使你的站点更具生命力、加入柔和的过渡效果会让用户体验提升不少(如,切换时淡入淡出而不是强硬跳转)。

那么,如果是 React 实现,如何高效地为组件加入动画?

React Transition Group 开源库就是解决方案之一。

What

React Transition Group 开源库,由 ReactJs 社区的人员开发; Star 和 Fork 数参考如下:

目前是 V2 版本(不向下兼容 V1 )

官方说明:一组用于管理组件状态(包括安装mounting 和卸载unmounting)的组件,特别为动画而设计的。

A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.

官方文档:Main documentation

官方示例:

弹窗消息渐入渐出:https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed


按钮替换动画效果 https://codesandbox.io/s/switchtransition-component-iqm0d?from-embed


列表的删除加入 https://codesandbox.io/s/00rqyo26kn?from-embed


How

网上目前没有比较详细的教程,只有官方文档(英文)可参考,文档相对比较精简。

React Transition Group 中,提供了四个组件,分别是:

以下对官方文档做些简单的翻译和理解,也可跳过直接看总结用法即可。

Transition

Transition 组件让你可使用简单的声明性API,来描述从一个组件状态到另一组件状态的随时间过渡。常用于组件的安装和卸载动画,但也可以用于描述就地转换状态。

**注意:**Transition 是与平台无关的基本组件。如果在CSS中使用过渡,则可能需要改用 CSSTransition,后者继承了Transition 的所有功能,但包含一些与CSS完美过渡配合所必需的附加功能(从组件名称也可见其用处)。

因此,通常我们就直接使用 CSSTranstion 即可。

CSSTranstion

源于 ng-animate 这个出色库的启发,若使用CSS过渡或动画,则应使用 CSSTranstion 。基于 Transition 组件构建,因此继承了前者的所有属性。

CSSTransition 应用了一对类名来过渡 “出现”,”进入“ 和 ”退出“ 这些状态。初始使用第一个(CSS)类名,然后应用第二个名为 * -active 的类来激活CSS过渡。过渡后,将应用匹配的 * -done 类名称来保留过渡状态。

如上例中,CSSTransition 组件适用了名称为 my-node-* 过渡样式效果。

动画类名应用于出现,进入,退出或已完成过渡的组件。可以提供一个名称,每个阶段后缀将加在该名称后面,例如 classNames =“ fade” 的应用(可以加上列如以下的后缀):

  • fade-appear, fade-appear-active, fade-appear-done
  • fade-enter, fade-enter-active, fade-enter-done
  • fade-exit, fade-exit-active, fade-exit-done

结合官方示例:弹窗消息渐入渐出:https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed 来理解,示例中使用了 enter 和 exit 这两个状态

image-20210205145321345
image-20210205145321345

总结用法

利用 CSSTransition 进行单个元素的动画开发

各过渡状态的名词解释及包含类名详见以下:

  • enter -> 进入触发之前
    • enter
    • appear -> appear 系列的类名只在第一次进入时生效
  • entering -> 进入动画开始到结束的过程中
    • enter-active
    • appear-active
  • entered -> 进入动画完成
    • enter-done
    • appear-done
  • exit -> 结束动画触发钱
    • exit
  • exiting -> 结束动画开始到结束的过程中
    • exit-active
  • exited -> 结束动画完成
    • exit-done

参考文章

react-transition-group 实现路由切换过渡效果

[三元学React]使用react-transition-group开发React动画