在 react 的 setState 上显示一个简单的动画

Question

我将 JSON 文件中的数据显示到我组件中的 DIV。
我设置超时几秒，然后显示数据。
我想在状态变为真时显示一个简单的动画。

这是我的代码结构示例：

import someData from "../Data";

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { contentLoad: false }
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                contentLoad: true
            })
        }, 2500)
    }

    render() {
        return (
            <div>
                {someData.map((someData) => {
                    return (
                        <div> {this.state.contentLoad && someData.name}</div>
                    )
                })}
            </div>
        )
    }
}

我阅读了有关 React 过渡组的信息，但无法理解，因为我是 React 的新手。有人请使用这个作为模板，并为我提供一个 codepen 或 codesandbox link 来解决问题。

Answer 1

我同意@JohnRuddell 的观点，如果您只需要一个简单的淡入，Pose 就是一个沉重的库。但是，如果您正在制作多个更复杂的动画，我会考虑它。

示例代码：

import React from "react";
import ReactDOM from "react-dom";
import posed from "react-pose";
import "./styles.css";

const AnimatedDiv = posed.div({
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
});

class Example2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contentLoad: false };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        contentLoad: true
      });
    }, 2500);
  }
  someData = ["hello", "hi", "test"];
  render() {
    return (
      <AnimatedDiv pose={this.state.contentLoad ? "visible" : "hidden"}>
        {this.someData.map(t => {
          return <div>{t}</div>;
        })}
      </AnimatedDiv>
    );
  }
}

ReactDOM.render(<Example2 />, document.getElementById("root"));

Sandbox link

在 react 的 setState 上显示一个简单的动画

Show a Simple Animation on setState in react

reactjs

react-transition-group