Trigger a quick animation and then remove the element in React

By Brian Schlenker

I’m writing a dashboard using react/redux that displays information in real time. I have a

that keeps getting populated with new data, pushing the old data down. When this div is scrolled, I pause the realtime display of data. I want this to also trigger a short animation of a pause symbol expanding and fading out from the center of the screen. I thought I could use CSSTransitionGroup like this:

render() {
  const img =
    ? "/images/play.svg"
    : "/images/pause.svg";
  return (
      <img src={img} key={+new Date()} />

The problem is that the img element and the element created by the CSSTransitionGroup are always on the page. I want to be able to trigger this animation when the state changes between active == true and active == false, and then immediately remove the elements when the animation is complete.

Is there already a good way to do this with an existing library? Or is there an easy way for me to roll my own solution?

Source: Stack Overflow


Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273