React中常见的动画实现的几种方式(4)

transitionName 属性为 'tabs-wrapper' ， transitionEnterTimeout 为400毫秒后，一旦 CSSTransitionGroup 中新增节点，该新增节点会在出现时被添加上 css 类 'tabs-wrapper-enter' ，然后在下一帧时被添加上 css 类 'tabs-wrapper-enter-active' 。由于这两个 css 类中设定了不同的透明度和 css3 transition 属性，所以节点实现了透明度由小到大的入场效果。400毫秒后 css 类 'tabs-wrapper-enter' 和 'tabs-wrapper-enter-active' 将会同时被移除，节点完成整个入场动画过程。离场动画的实现类似于入场动画，只不过被添加的 css 类名为 'tabs-wrapper-leave' 和 'tabs-wrapper-leave-active' 。该示例效果如下图所示：

CSSTransitionGroup 支持以下7个属性：

其中，入场和离场动画是默认开启的，使用时需要设置 transitionEnterTimeout 和 transitionLeaveTimeout 。值得注意的是， CSSTransitionGroup 还提供出现动画（appear），使用时需要设置 transitionAppearTimeout 。那么，出现动画和入场动画有什么区别呢？当设定 transitionAppear 为 true 时， CSSTransitionGroup 在 初次渲染 时，会添加一个出现阶段。在该阶段中， CSSTransitionGroup 的已有子节点都会被相继添加 css 类 'tabs-wrapper-appear' 和 'tabs-wrapper-appear-active' ，实现出现动画效果。因此， 出现动画仅适用于 CSSTransitionGroup 在初次渲染时就存在的子节点 ，一旦 CSSTransitionGroup 完成渲染，其子节点就只可能有入场动画（enter），不可能有出现动画（appear）。

此外，使用 CSSTransitionGroup 需要注意以下几点：

1. CSSTransitionGroup 默认在 DOM 树中生成一个 span 标签包裹其子节点，如果想要使用其他 html 标签，可设定 CSSTransitionGroup 的 component 属性；
2. CSSTransitionGroup 的子元素必须添加 key 值才会在节点发生变化时，准确地计算出哪些节点需要添加入场动画，哪些节点需要添加离场动画；
3. CSSTransitionGroup 的动画效果只作用于直接子节点，不作用于其孙子节点；
4. 动画的结束时间不以 css 中 transition-duration 为准，而是以 transitionEnterTimeout ， transitionLeaveTimeout ， TransitionAppearTimeout 为准，因为某些情况下 transitionend 事件不会被触发，详见 MDN transitionend 。