CSS3动画链接单击，而不是页面加载 [英] CSS3 Animation On Link Click, not Page Load

问题描述

我有一个类似reddit的应用程序，其中我想要一个CSS3动画触发每当我 downvote 一个项目。我有它的设置，所以动画工作正常每当一个 downvote ，但是记录，但它也触发初始页面加载。任何试图让这不发生的动画使动画在任何情况下都不工作。

I have a reddit-like app in which I want a CSS3 animation to trigger whenever I downvote an item. I have it set up so the animation works properly whenever a downvote, but is recorded, but it also triggers on the initial page load. Any attempts to have this not happen have made the animation not work under any circumstances.

动画是在我的 erb 页面上触发的：

The animation is triggered with the following on my erb page:

<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：

I also have the following definitions in my application.scss page that I have tried to use with the jQuery:

.fixed {
  position: fixed;
}

.no-display {
  display: none;
}

任何人都可以帮助我解决这个问题，载入？

Can anyone help me fix this so the animation does not trigger when the page initially loads?

注意：我并没有使事实与动画本身的实际 CSS 动画 正常工作，只需一次额外的时间。如果有人认为这将有助于我添加它，但我真的认为问题是与我的 JavaScript 。

Note: I'm not complicating the matter with the actual CSS for the animation itself, because the animation is working properly, just one extra time. If anyone thinks it would help I can add it, but I really think the issue is to do with my JavaScript.

推荐答案

动画是在加载运行，因为你添加了类的图像标签，所以当它加载它做任何类做（在这种情况下animate）。
Ankith是正确的，如果你不想在加载运行，该类名应该只是固定的。
这可能是愚蠢的，但由于你已经有一个类，尝试添加一个空的空间在开始的javascript调用，这可能是为什么不做任何事情，因为你最终得到一个类名为'fixedanimation -left-to-right'

the animation is running at load because you added the class to the image tag, so when it loads it does whatever that class do (on this case animate). Ankith is correct, if you dont want to run at load, that class name should be only fixed. It may be silly, but since you already have a class, try to add an empty space at the begining on your javascript call, that could be why is not doing anything, because you end up with a class named 'fixedanimation-left-to-right'

尝试

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

这篇关于CSS3动画链接单击，而不是页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！