Question

我有一个类似reddit的应用程序，我想在每次downvote项目时触发CSS3动画。我已经设置好所以动画可以在downvote时正常工作，但是会被记录，但它也会在初始页面加载时触发。任何不发生这种情况的尝试都会使动画在任何情况下都不起作用。

我的erb页面上的以下内容触发了动画：

<div class="animations">
  <%= image_tag "ballerino.png", class: "fixed animation-left-to-right", id: "to-animate", style: "margin-top: 80px; width: 300px" %>

  <script>
  $(".downvote").on('click', function() {
    $('#to-animate').addClass('animation-left-to-right');
    window.location.reload(false);
  });
  </script>

</div> <!-- animations -->

我在application.scss页面中也有以下定义，我尝试使用jQuery：

.fixed {
  position: fixed;
}

.no-display {
  display: none;
}

任何人都可以帮我修复此问题，以便在页面最初加载时不会触发动画吗？

注意：我并没有将这个问题与动画本身的实际CSS复杂化，因为动画正常工作，只需要一次额外的时间。如果有人认为我可以添加它，但我真的认为问题与我的JavaScript有关。

Answer 1

动画正在加载运行，因为您已将类添加到图像标记中，因此在加载时它会执行该类所做的任何操作（在此情况下为动画）。 Ankith是正确的，如果你不想在加载时运行，那么类名应该只是固定的。这可能很愚蠢，但是因为你已经有了一个类，所以尝试在javascript调用的开头添加一个空格，这可能就是为什么没有做任何事情，因为你最终得到一个名为'fixedanimation-left-to的类右汉字“

试

git commit -m "commit message1" -m "commit message2"

链接上的CSS3动画单击，而不是页面加载

1 个答案: