反应：animationOut 不显示使用 Animated.css

Question

我有一个 hide/display 内容的切换示例。

我使用了 https://www.npmjs.com/package/react-animated-css 并且它在显示内容时效果很好，这意味着在显示内容之后正在播放动画。

现在我按下切换按钮，内容立即消失，没有动画。

我检查了控制台，animationOut 的 class 正在工作，但似乎内容在动画有时间播放之前就关闭了，所以它被隐藏了。

如何解决这个问题？

工作代码：https://stackblitz.com/edit/react-sorgz5?file=src/App.js

import React, { Component } from "react";
import ContentComponent from "./content.js";
import { Animated } from "react-animated-css";

export default class toggleComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      isShowBody: false
    };
  }

  handleClick = event => {
    this.setState({ isShowBody: !this.state.isShowBody });
  };

  checkbox = () => {
    return (
      <div>
        <span className="switch switch-sm">
          <label>
            <input
              type="checkbox"
              name="select"
              onClick={this.handleClick.bind(this)}
            />
            <span />
          </label>
        </span>
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.checkbox()}

        <Animated
          animationIn="bounceInLeft"
          animationOut="fadeOut"
          isVisible={this.state.isShowBody}
        >
          <div>{this.state.isShowBody && <ContentComponent />}</div>
        </Animated>
      </div>
    );
  }
}

Answer 1

已解决。我需要删除 <div> 中的 this.state.isShowBody，因此可见性条件由 isVisible 控制。

<Animated
          animationIn="bounceInLeft"
          animationOut="fadeOut"
          isVisible={this.state.isShowBody}
        >
          <div>{<ContentComponent />}</div>
        </Animated>

反应：animationOut 不显示使用 Animated.css

React: animationOut not showing using Animated.css

javascript

animate.css

reactjs