TransitionGroup 和 CssTransition：未應用退出過渡

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

我一直在為同樣的問題苦苦掙扎 - 對我有用的解決方案是在<TransitionGroup>上使用childFactory道具，如下所示：

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

Answer 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;
}