Question

我有一个react组件和该组件的某些部分，而该部分只是有条件地渲染。当我单击组件（按钮）的可见部分时，它称为状态更改并呈现隐藏的部分。现在，我要淡入该隐藏部分，而不是立即显示。有什么方法可以仅使用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; }
}

如何使用javascript和css在状态更改时为组件的有条件渲染的部分设置动画？

1 个答案: