CSS3 Анимация по ссылке Нажмите, а не на странице Загрузка

Question

У меня есть приложение, подобное reddit, в котором я хочу, чтобы анимация CSS3 запускалась всякий раз, когда я downvote элемент. Я настроил его так, чтобы анимация работала корректно всякий раз, когда 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- направо»

попробовать

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