ReactCSSTransitionGroup：transitionAppear 不起作用

Question

我正在尝试 appearance/disappearance 通知，但 transitionAppear 不起作用。我将项目（通知弹出窗口）添加到 onBlur 事件。 leave 时的动画运行流畅，而在 appear 时它只是突然出现而没有 transition。最近在React，不骂人strongly:D

P.S.
如果我在 alert.js 中添加 ReactCSSTransitionGroup -appear 可以，但是 leave - 不行。

代码沙箱: https://codesandbox.io/s/l26j10613q
（在 CodeSandbox 上，我在 alert.js 中使用了 ReactCSSTransitionGroup，因此 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 重现您在 .gif 中显示的确切场景，方法是将 ReactCSSTransitionGroup 移动到 Input 组件。

阅读 docs 后，我发现这行解释了为什么您的 Alert 第一次出现时没有动画：

ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.

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

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

ReactCSSTransitionGroup：transitionAppear 不起作用

ReactCSSTransitionGroup: transitionAppear doesn't work

javascript

animation

jsx

reactjs

reactcsstransitiongroup