仅在页面加载时运行动画，而不是在容器再次出现时运行

Question

<div>
  <p class="bounceIn">
    Hello world
  </p>
</div>

https://jsfiddle.net/2fr1tcv6/

页面加载后，这些元素是可见的，因此bounceIn动画会运行。

但是在页面上，用户可以单击按钮并隐藏div，然后重新显示它。当div再次显示时，我不希望动画运行。有没有办法实现CSS属性？

Answer 1

您可以从P标记中删除bounceIn类。像这样：

  $("button").click(
  function(){
    $("div").toggle();
    $("p").removeClass("bounceIn");
  });