javascript - TransitionGroup 和 CssTransition : Exit transition not applied

Question

我从旧的 CSSTransitionGroup 迁移到新的 react-transition-group CSSTransition 和 TransitionGroup。

我正在创建(破解)一个叠加层加载器，并尝试在叠加层出现和消失时将动画应用于它。

特别是当我将 active=true 属性传递给 LoadingOverlayWrapper 时，一个新的 CSSTransition 被添加到 TransitionGroup(Fade组件)包裹要显示的叠加层。

当 active=false 时，CSSTransition 将从 TransitionGroup 中移除(TransitionGroup 的直接子级)为 null)。

这是代码的相关部分:

import React, {Children} from 'react'
import PropTypes from 'prop-types'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
import LoadingOverlay from "./LoadingOverlay";
import styles from './Overlay.sass';


const FirstChild = props => Children.toArray(props.children)[0] || null;

const Fade = (props) => (
  <CSSTransition
    {...props}
    timeout={500}
    classNames={{
      appear: styles.appear,
      appearActive: styles.appearActive,
      enter: styles.enter,
      enterActive: styles.enterActive,
      exit: styles.exit,
      exitActive: styles.exitActive
    }}
  >
    <FirstChild {...props} />
  </CSSTransition>
);


class LoadingOverlayWrapper extends React.Component {

  render() {
    const {active} = this.props;

    return (
      <div>
        <TransitionGroup>
          {
            active ?
            (
              <Fade key='transition_effect'>
                <LoadingOverlay key='the_dimmer' {...this.props} />
              </Fade>
            )
            :
            null
          }
        </TransitionGroup>
        {this.props.children}
      </div>
    )
  }
}

这是相关的 sass 文件(作为 css 模块导入):

.enter, .appear
  opacity: 0.01

.appearActive, .enterActive
  opacity: 1
  transition: opacity .5s ease-in

.exit, .leave
  opacity: 0.01

.exitActive, .leaveActive
  opacity: 0
  transition: opacity .5s ease-in

进入(或出现，此处不确定)过渡有效。

问题 是当我删除 Fade 组件时，替换为 null 然后退出转换不应用(或不可见) 但我没有收到任何错误，其他一切都按预期工作。

鉴于我对 React TransitionGroup 的经验很少，我不确定如何调试或继续此处。

Answer 1

我一直在努力解决同样的问题 - 对我有用的解决方案是使用 childFactory支持 <TransitionGroup>像这样:

   <TransitionGroup
     childFactory={child => React.cloneElement(child)}
   >
      {
        active ?
        (
          <Fade key='transition_effect'>
            <LoadingOverlay key='the_dimmer' {...this.props} />
          </Fade>
        )
        :
        null
      }
    </TransitionGroup>