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 这两个状态
总结用法
利用 CSSTransition
进行单个元素的动画开发
各过渡状态的名词解释及包含类名详见以下:
- enter -> 进入触发之前
- enter
- appear -> appear 系列的类名只在第一次进入时生效
- entering -> 进入动画开始到结束的过程中
- enter-active
- appear-active
- entered -> 进入动画完成
- enter-done
- appear-done
- exit -> 结束动画触发钱
- exit
- exiting -> 结束动画开始到结束的过程中
- exit-active
- exited -> 结束动画完成
- exit-done