Блог

Главная - Вопросы по программированию - Лучший способ перезапустить анимацию с помощью javascript (без использования webkit)

Лучший способ перезапустить анимацию с помощью javascript (без использования webkit)

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я кодирую интерактивный элемент, который поворачивается к вам, когда вы нажимаете на него. У меня просто есть событие onclick, которое добавляет класс с анимацией. К сожалению, после первого воспроизведения анимация не сбрасывается. Я нашел вопрос, задающий то же самое, но он был слишком сложным для меня и дополнительно использовал webkit, который я не хочу использовать для этого. Есть ли простой способ сбросить анимацию?

 .susanb{
    background-image:url('susanb.png');
    background-size:contain;
    width:18%; 
    height:45%;
    background-repeat:no-repeat;
    margin-top:12%;
    margin-left: 60%;
    position:absolute;
}

.susanbstare{
    animation-name: stare;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes stare{
    0%{background-image: url('susanbstarin.png')}
    99%{background-image: url('susanbstarin.png')}
    100%{background-image: url('susanb.png')}
}  
  <div class="susanb" id="susan"><div style="width:100%;height:100%;position:absolute;" onclick="stare();"></div>
    <script>
        function stare(){
            document.getElementById("susan").removeAttribute("class");
            document.getElementById("susan").setAttribute("class", "susanb susanbstare");
        }

    </script>
</body>

Ответ №1:

 .susanbstare {
  animation: stare 2s infinite;
}

Кстати, в JS это лучше

 document.getElementById("susan").classList.toggle("susanbstare");

вместо этих 2 строк

 document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");