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