javascript - 仅在添加类时触发 css 关键帧

Question

如果单击按钮 2，您将看到动画运行。但是，当我使用另一个功能对按钮进行更改(选中复选框以显示。隐藏按钮)时，动画会再次运行，就像再次按下一样。

如何防止每次单独的函数对按钮进行更改时触发动画？即在切换或显示/隐藏上？

$(function() {
  $("button").click(function() {
    $(this).addClass("active");
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggle();
  });
});

button {
  background: silver;
}

button.active {
  background: green;
  -webkit-animation: bounce 300ms none;
  animation: bounce 300ms none;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <input type="checkbox">
  <button>
  Button 1
</button>
  <button id="hide">
  Button 2
</button>
</section>

Answer 1

您的问题是由切换 display 属性引起的。
您可以使用另一种方法来隐藏元素，例如:

$(function() {
  $("button").click(function() {
    $(this).addClass("active");
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggleClass('hidden');
  });
});

button {
  background: silver;
}

button.active {
  background: green;
  animation: bounce 300ms ease-in-out;
}

.hidden {position:fixed; top:-150%}

@keyframes bounce {
  0% {
    transform: scale(.7);
  }
  50% {
     transform: scale(1.2);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <input type="checkbox">
  <button>
  Button 1
</button>
  <button id="hide">
  Button 2
</button>
</section>