I want re-add the animate-bounce class whenever the itemCount increases it's value

Question

I want to add class again and again on click handleClick in minicart I got two separate components one component contain the handleClick and other component is the minicart.

Is there any way I can do this? I am trying this code on handleClick but this doesn't work

useEffect(() => {
    document.querySelector("#minicart-id").classList.add('animate-bounce');
});

If I try this without useEffect it works but it only add class one time.

Answer 1

If you want to play the animation again and again, you have to add and remove the className from the span.

First store the classNames inside a state.
Second you have to add the animate-bounce class when you increase the cart items.
Third you need a useEffect where you remove the animate-bounce class after the animation time, for example:

const [classNames, setClassNames] = useState();

useEffect(() => {
  let timer;
  if (classNames === "animate-bounce") {
    timer = setTimeout(() => {
      setClassNames();
    }, 1000);
  }

  return () => clearTimeout(timer);
}, [classNames]);