ReactCSSTransitionGroup:transitionAppear不起作用

Question

我试图出现/消失通知,但transitionAppear不起作用.我向onBlur事件添加项目(通知弹出窗口).工作时的动画leave流畅,当时的动画appear突然出现transition.最近在React中,不要发誓:D

PS
如果我添加ReactCSSTransitionGroup的alert.js- appear作品,但leave-没有.

CodeSandbox: 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

我必须更改您的代码ReactCSSTransitionGroup，通过移动到组件来重现您在 .gif 中显示的确切场景Input。

阅读文档后，我发现这一行对于为什么你Alert第一次出现时没有动画是有道理的：

ReactCSSTransitionGroup 提供了可选的属性transitionAppear，以在组件的初始安装时添加额外的过渡阶段。

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

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