Question

我有一个最初透明的按钮。当按下它时，我希望它通过传入“b”或“w”的道具“生长”成彩色圆圈。如果它还没有按下，它应该保持透明。另外，不能预先确定黑色或白色的按钮。当支柱变为空时，我也希望它“缩小”回透明度。成长部分对我来说很好，但萎缩不是。

按钮检查道具的值并决定应用哪些类：

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/

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

1 个答案: