TransitionGroup 和 CssTransition：未应用退出过渡

Posted 2023-03-07

【中文标题】TransitionGroup 和 CssTransition：未应用退出过渡

【英文标题】：TransitionGroup and CssTransition: Exit transition not applied

【发布时间】：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 工作原理的了解有限，我遇到了完全相同的情况。您能找到解决方案吗？

已经有一段时间了，但我记得没有，我没有找到解决方案：\

【参考方案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;