css - 仅在页面加载时运行动画，当容器再次出现时不运行

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");
  });