css - React，从元素中删除类时添加动画？

Question

我有一个最初是透明的按钮。当它被按下时，我希望它通过传入一个“b”或“w”的 Prop “成长”成一个彩色圆圈。如果尚未按下，它应该保持透明。此外，无法预先确定按钮是黑色还是白色。当该 Prop 变为空时，我还希望它“收缩”回透明状态。增长部分对我来说工作正常，但收缩部分不是。

按钮检查 prop 的值并决定应用哪些类:

render() {
    var areaClass = classnames({
        button: true,
        black: this.props.gameState === "b",
        white: this.props.gameState === "w",
    })
    return (
      <button className={areaClass} onClick={() => this.props.onClick()}></button>
    );
  }

在 CSS 中，我在添加正确执行动画的黑白类时使用增长关键帧。我尝试在按钮类中放置一个收缩关键帧，但是当我删除黑色或白色类时它没有应用动画。它只是闪烁，好像没有动画。

button {
  z-index: 3;
  position: relative;
  width: 30px;
  height: 30px;
  margin: 2px;
  border-radius: 50%;
  background: transparent;
  border-color: transparent;
  animation-name: shrink;
  animation-duration: 0.3s;
}

.button:focus {
  outline: none;
} 

.black, .white {
  animation-name: grow;
  animation-duration: 0.3s;
}

.black {
    background: black;
}

.white {
    background: white;
    border: 2px solid black;
}

@keyframes grow {
  0% {transform: scale(0, 0);}
  100% {transform: scale(1, 1);}
}

@keyframes shrink {
  0% {transform: scale(1, 1);}
  100% {transform: scale(0, 0);}
}

Answer 1

问题不在 React 或动画中，实际上您的按钮正在像您预期的那样缩小。但是，您的 black 和 white 类名是定义按钮背景颜色的类名，它们是被删除的类名。您的按钮正在缩小，但它们是透明的。

始终保持定义的背景色，并为 grow 动画分配不同的类名。此外，应用 animation-fill-mode: forwards; 使按钮保持在动画的结束状态。

.btn {
  /* other styles */
  animation-fill-mode: forwards;
}

.grow {
  animation-name: grow;
}

.black {
    background: black;
}

.white {
    background: white;
    border: 2px solid black;
}:

正在处理更改:https://jsfiddle.net/ssorallen/1dL2wkaq/