Javascript 触发快速动画，然后删除React中的元素

我正在使用react/redux编写一个实时显示信息的仪表板。我有一个

，它不断填充新数据，将旧数据向下推。当这个div被滚动时，我暂停数据的实时显示。我想这也会触发一个短暂的动画，暂停符号会从屏幕中心扩展和淡出。我想我可以这样使用：

...
render() {
  const img = this.props.active
    ? "/images/play.svg"
    : "/images/pause.svg";
  return (
    ...
    <CSSTransitionGroup
        transitionEnterTimeout={200}
        transitionLeave={false}>
      <img src={img} key={+new Date()} />
    </CSSTransitionGroup>
  );
}

。。。
render（）{
const img=this.props.active
？“/images/play.svg”
：“/images/pause.svg”；
返回(
...
);
}

问题是，

img

元素和由

cstransitinggroup

创建的元素总是在页面上。我希望能够在状态在

active==true

和

active==false

之间变化时触发此动画，然后在动画完成后立即删除元素

对于现有的库，是否已经有一个很好的方法可以做到这一点？或者有没有一种简单的方法让我推出自己的解决方案

编辑：

---

这里有一个又快又脏的。它并没有真正显示出我想做什么，因为我无法理解它。但基本上，当单击按钮时，它会在组件状态中切换布尔值。每次该布尔值更改时都应触发动画。这个动画应该在CSSTransitionGroup中渲染元素，应用一个类来触发动画，然后在动画完成后删除元素。

您可以创建JSFIDLE或codepen演示吗？@TahirAhmed我添加了一个JSFIDLE，但我不知道它有多有用。