react-transition-group中文指南

 

动画实现：首选css3动画，但是有些是不单单使用css动画就能实现的，如下案例：

下拉列表展开和收起，三角图标的切换：列表收起-》展开设置display：none-》block，但是这种没有过渡动画，在设置opacity：0，transition： opacity 0.5s ease-in，展开时opacity：1，但是运行效果并没有什么改变，因为display不是一个标准的animation属性，所以css动画没有起作用，如果只是用opacity：0-》1那么当收起下拉列表时只是看不见其实列表还在占据空间，和display：none不同，那么就需要带有延时的解决方案：不能让display和opacity同时生效，如下：

 

如上不是单单使用css动画就能实现的，采用第三方库：react-transition-group

这个组件就是在动画从无到有和从有到无的过程中添加多个描述动画生命周期的class名称，按照动画时间顺序排列。

react-transition-group体积非常小，gzip之后只有5k不到、只提供动画状态（描述动画生命周期的类名），具体的动画实现完全由自己掌控。

属性：

• in：<bool = false>，触发进入或退出状态，in值的变化决定了动画是enter还是exit，in值的变化是触发动画的扳机=>//在in属性指向的状态被切换时,触发切换动画。
• children：<fn | ele> required，接收一个function作为children，当转换状态发生转换时调用此function，并将当前状态作为参数传入
• timeout：动画持续时间（ms），<number | { enter?: number, exit?: number, appear?: number }>，如果未传入addEndListener 属性，此项为必传字段
• classNames：css类名
• mountOnEnter：<bool = false>，默认情况子组件与transtion组件一起加载(也就是说即使in属性为false，组件也会先以隐藏状态(exited)正常加载)，当mountOnEnter 为true时，会在第一次in属性为true时加载子组件
• unmountOnExit：<bool = false>，在元素退场时，自动把DOM也删除，这是以前用CSS动画没办法做到的。在过渡结束后卸载组件, 测试发现这里确实卸载了子组件生成的dom节点，但是并不会触发componentWillUnmount钩子，在子组件重新进入entered状态时也不会重新触发componentDidMount等创建阶段钩子
• appear：<bool = false>，内部组件将在transtion加载后立即执行一次转换
• enter：<bool = true>，是否开启进入转换(关闭后不进入entering状态，直接进入entered状态)，注意当appear 为true时此设置不会生效
• exit：<bool = true>，是否开启退出转换，与enter相反
• addEndListener：<fn(node, done)>，用于手动触发动画结束状态的事件以允许你更细粒度的控制动画状态，传入改属性时，timeout属性扔作为后备属性生效。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

事件属性：

onEnter： Function(node: HtmlElement, isAppearing: bool)，进入entering状态之前触发的回调, 在第一次mount时会传入isAppearing判断是否开启appear 选项

onEntering：Function(node: HtmlElement, isAppearing: bool)，进入entering状态后触发的回调（也就是开始调用entering后触发）

onEntered: Function(node: HtmlElement, isAppearing: bool)，进入entered状态后触发的回调

onExit:Function(node: HtmlElement)，在exit状态前触发的回调

onExiting:Function(node: HtmlElement)，在进入exiting状态后触发的回调

onExited:Function(node: HtmlElement)，在进入exited状态后触发的回调

<CSSTransition in={showMessage} timeout={300} classNames="alert" unmountOnExit onEnter={() => setShowButton(false)} onExited={() => setShowButton(true)} > ... </CSSTransition>

 

CSSTransition

根据当前的动画状态为动画元素添加对应的类名, 依赖于Transition组件，除非特别说明，否则接受来自Transtion组件的所有prop

各阶段的名词解释及包含类名：

classNames
<str | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }>

在动画进行的各个阶段添加对象阶段的类名, 如果不传则作用去掉前缀的默认类名如：enter-active、enter-done

例: 当classNames=“fade” 时适用于以下类

.fade-appear    // 初次进入前的状态, 注意在初次进入时，appear和 enter 相关的类名会在第一次动画时同时生效
.fade-appear-active    // 初次进入中的状态
.fade-appear-done    // 初次进入后的状态

.fade-enter            // 开始过渡时生效,元素被插入前
.fade-enter-active     // 开始过渡时的状态
.fade-enter-done       // 过渡结束后的状态

.fade-exit             // 离开过渡的开始状态,元素被插入前
.fade-exit-active      // 离开过渡生效时的状态
.fade-exit-done        // 离开过渡的结束状态

也可以单独为每个阶段指定不同的类名

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

使用cssModule时，可以在文件中以驼峰命名的方式直接写以上的类名，然后通过spread运算符直接使用

import styles from './styles.css';

 

TransitionGroup

TrannstionGroup没有定义任何动画行为，列表项如何动画全是都当前项的Transition决定

通过css动画非常简单的实现列表过渡：https://stackblitz.com/edit/react-rtuurv

props：
component
<any = div>

选择生成的包装元素，如果不想要包装元素，传入null

children
一组Transition或cssTransition组件，在 in 、进入、离开时触发动画。

appear
禁用或启用所有子项的初次登场动画

enter
禁用或启用所有子项的进入动画

exit
禁用或启用所有子项的离场动画

childFactory
可以在此回调中更新动画元素,接收原本要渲染的ReactElement，返回要渲染的新ReactElement
<fn(ReactElement) => ReactElement>

<TransitionGroup appear childFactory={el => <div>被替换的元素</div>}>