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

问题描述

我有一个隐藏/显示内容的切换示例。

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

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

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

如何解决这个问题？

工作代码：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>
    );
  }
}

解决方法

解决了。我需要删除 interface IField<V> { value: V; } class Field<V> implements IField<V> { value: V; constructor(params: { value: V }) { this.value = params.value; } } type TFields<T> = { [K in keyof T]: T[K] extends IField<T[K]> ? IField<T[K]> : TFields<T[K]> } class Form<T> { fields: TFields<T>; constructor(fields: TFields<T>) { this.fields = fields; } } /* Expected: { id: IField<string>,auth: { login: IField<string>,password: IField<number>,code: { isValid: IField<boolean> } } } Received: { id: string,auth: TFields<{ login: string,password: number,code: TFields<{ isValid: boolean }> }> } */ type FormSchema = { id: string,auth: { login: string,code: { isValid: boolean } } } const form = new Form<FormSchema>({ id: new Field({ value: '' }),auth: { login: new Field({ value: '' }),password: new Field({ value: 0 }),code: { isValid: new Field({ value: false }) } },}) 中的 this.state.isShowBody，因此可见性的条件是由 <div> 控制。

isVisible