ReactCSSTransitionGroup：transitionAppear不起作用

Question

我正在尝试显示/消失该通知，但是transitionAppear不起作用。我将项目（通知弹出窗口）添加到onBlur事件中。 leave时的动画运行流畅，而appear时的动画只是突然出现而没有transition。在最近的React中，不要发誓：D

PS
如果我在 ReactCSSTransitionGroup 中添加alert.js，则-appear有效，但是leave-不。

代码沙箱： https://codesandbox.io/s/l26j10613q
（在CodeSandbox上，我在 ReactCSSTransitionGroup 中使用了alert.js，所以appear有效，但是leave —否）

alert.js:

export default class Alert extends Component {
  render() {
    const { icon, text } = this.props;
    let classNames = "cards-wrapper-alert";
    return (
     <div className={classNames}>
       <Card zIndex="2">
         <Icon icon={icon} eClass="alert-message-icon"/>
         <Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
       </Card>
     </div>
    );
  }
}

alert.css:

.alert-appear {
  max-height: 0;
  overflow: hidden;
}

.alert-appear.alert-appear-active {
  max-height: 80px;
  transition: max-height 300ms ease-in-out;
}

.alert-leave {
  max-height: 80px;
}

.alert-leave.alert-leave-active {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
} 

我在 input.js:

中的工作

<ReactCSSTransitionGroup
  component={this.prepareComponentForAnimation}
  transitionName="alert"
  transitionEnter={false}
  transitionAppear={true}
  transitionAppearTimeout={400}
  transitionLeaveTimeout={400}>
    {this.state.alert ?
      <Alert icon={this.state.icon} text={this.state.text}/>
    : null}
</ReactCSSTransitionGroup> 

示例：

Answer 1

我必须change your code通过将ReactCSSTransitionGroup移至Input组件来重现您在.gif中显示的确切场景。

在阅读docs之后，我发现这一行对于第一次出现时为什么Alert没有进行动画处理是有道理的：

  

ReactCSSTransitionGroup提供了可选的prop transitionAppear，用于在组件的初始安装处添加额外的过渡阶段。

这里发生的不是初始安装。一旦输入上有一些用户交互，就将设置alert状态。

因此，您问题的简单答案是，由于我上面发布的文档，您需要使用enter阶段，而不是appear阶段。