TransitionGroup 和 CssTransition：未应用退出过渡答案

【问题标题】：TransitionGroup and CssTransition: Exit transition not appliedTransitionGroup 和 CssTransition：未应用退出过渡
【发布时间】：2018-03-28 05:12:30
【问题描述】：

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

我正在创建（破解）一个覆盖加载程序，并尝试在覆盖出现和消失时将动画应用于覆盖。

特别是当我将一个active=true 道具传递给LoadingOverlayWrapper 时，一个新的CSSTransition 被添加到包装覆盖显示的TransitionGroup（Fadecomponent）。

当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 的经验很少，我不确定如何在此处调试或继续。

【问题讨论】：

由于对 TransitionGroup 工作原理的了解有限，我遇到了完全相同的情况。您能找到解决方案吗？
已经有一段时间了，但我记得没有，我没有找到解决方案：\

标签： javascript reactjs animation react-transition-group

【解决方案1】：

我一直在努力解决同样的问题 - 对我有用的解决方案是使用 <TransitionGroup> 上的 childFactory 道具，如下所示：

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

【讨论】：

【解决方案2】：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

注意：确保使用 CSS 中的 class 属性应用以下样式：

.my-element-enter {
  opacity: 0;
  transform: scale(0.9);
}
.my-element-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
  opacity: 1;
}
.my-element-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

【讨论】：