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

TransitionGroup和CssTransition：未应用退出转换

2 个答案: