如何使用 javascript 和 css 在状态更改时对组件的有条件渲染部分进行动画处理？

Question

我有一个反应组件和该组件的某些部分，该部分仅根据条件呈现。当我单击组件（按钮）的可见部分时，它调用状态更改并呈现隐藏部分。现在我想淡出隐藏的部分，而不是立即显示。有没有办法只使用 CSS 而不使用任何外部库（如 CSSTranstionGroup）来做到这一点？感谢您的帮助。

import React, { Component } from "react";

export default class Parent extends Component {
  state = {
    showForm: false
  };

  render() {
    const { showForm } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showForm: true })}>
          Fade in form on click
        </button>
    {showForm && (
      <div>
        <h2>
           This part needs to be fade in once the **showForm** is true
         </h2>
        <form></form>
      </div>
        )}
      </div>
    );
  }
}

Answer 1

包括外部潜水的自定义类名称。我使用类名称“fadeIn”

{showForm && (
   <div className="fadeIn">
     <h2>
       This part needs to be fade in once the **showForm** is true
     </h2>
     <form></form>
   </div>
 )}

将其添加到您的CSS文件中。

.fadeIn {
  animation: fadeInAnimation 2s;
}

@keyframes fadeInAnimation {
    from { opacity: 0; }
    to   { opacity: 1; }
}