Show a Simple Animation on setState in react

Question

I display a data from JSON file to the DIV in my component.
I Set timeout for few seconds and after that the data displays.
I want to show a simple animation when the state changes to true.

Here is a sample of my Code Structure:

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>
        )
    }
}

I read about react transition group, but cant understand cause i'm new to react. someone please use this as a template and provide me a codepen or codesandbox link for solution.

you just need to use css and classes to do this. What kind of animation do you want? — John Ruddell, Jul 18 '19 at 06:37
simple fadein animation in enough, i just want to know how to!! kindly help me @JohnRuddell — Nandhini Kajol, Jul 18 '19 at 06:38
Definitely check out [react-pose](https://www.npmjs.com/package/react-pose). There's a great [starting tutorial](https://popmotion.io/pose/learn/popmotion-get-started/) — rb612, Jul 18 '19 at 06:38
Hi @rb612, i read about pose. can you please use my sample code as template and create a simple animation anything you like, in a codesandox or codepen and provide me a link? it will be more helpful for me. thanks — Nandhini Kajol, Jul 18 '19 at 06:39
I mean, you just change the class name on the element. and use the changed class to apply a css transition. https://codesandbox.io/s/react-example-d7unp if you need to do a lot of animations then you can look at pose, just dont pull in a package if this is what you need to do. not necessary — John Ruddell, Jul 18 '19 at 06:46
@JohnRuddell, Thanks for your codesandbox link,i dont know until now, it was this much easy to implement. This is what i needed. Kindly do the same animation in pose if time available, ill check it also because pose contains many animations. Thanks — Nandhini Kajol, Jul 18 '19 at 06:54
if you want someone to write code for you you should look at coaching / paid services for that. But dont just pull in a package to do a simple thing like this. its not needed for the scope. Only if you know you're going to have a lot of animations and they are more complex. Pose or [Motion](https://github.com/framer/motion) give a nice api around more complex animations — John Ruddell, Jul 18 '19 at 06:57

score 0 · Accepted Answer · answered Jul 18 '19 at 06:59

I agree with @JohnRuddell that Pose is a heavy library if all you need is a simple fade in. However I would look it if you are doing multiple animations that are more complex.

Sample code:

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

Show a Simple Animation on setState in react

1 Answers1