React/animation - render animation everytime on button click when state or props change-CodePudding

I am trying to have the animation work everytime i click on the buttons in the below project

Code - https://codesandbox.io/s/8fjs8i

Description There are 3 buttons named first, second and third. when i click on first, the purple box below shows first, when i click on second it shows second and so on, basically the div is updating everytime based on button click.

Problem : but the animation fadIn that i have given to the div works only on application load. how can i make it work everytime i click the button so the the box fadesIN with animation for every click.

CodePudding user response：

const Renders = ({ arr }) => {
  const [load, setLoad] = useState(false);

  useEffect(() => {
    setLoad(true);
    setTimeout(() => {
    setLoad(false);
    }, 1);

  }, [arr]);

  if (load) return <></>;

  return (
    <div className="renders">
      <div className="zoomers">{arr}</div>
    </div>
  );
};

CodePudding user response：

This another way you can do it:

const Renders = ({ arr }) => {
  const [load, setLoad] = useState(false);

  useEffect(() => {
    setLoad(true);
    setTimeout(() => {
    setLoad(false);
    }, 1);

  }, [arr]);

  return (
    <div className="renders">
      <div className={load ? '' : "zoomers"}>{arr}</div>
    </div>
  );
};

Now look the different, before you load and unload, now its just a play with the class name, the idea that every time you load element with the animation class so its start to work