CSS3 Animation On Link Click, not Page Load

Question

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.

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

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?

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.

Answer 1

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'

try

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