выполнение функции после запуска css анимации - PullRequest
0 голосов
/ 30 апреля 2020

Я пытаюсь заставить эту функцию

var rotations = 0
function planet1rotate{
    rotations = rotations + 1
    document.getElementById('rotate').innerHTML = rotations
}

воспроизводиться после этой анимации

    @keyframes spin-right {
        100% {transform: rotate(360deg);}
    }

вот весь код, если он помогает

<html>
<head>
<title></title>
<style type="text/css">
    #star{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100px;
        width: 100px;
        margin-top: -50px;
        margin-left: -50px;
        border-radius: 50%;
        background-color: red;
        animation: spin-right 2s linear infinite;  
    }
    @keyframes spin-right {
        100% {transform: rotate(360deg);}
    }
    #planet1{
        background-color: red;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
</head>
<body>
<script type="text/javascript">
    var rotations = 0
    function planet1rotate{
        rotations = rotations + 1
        document.getElementById('rotate').innerHTML = rotations
    }
</script>
<h1 id="rotate"></h1>
<div id="star">
    <div id="planet1"></div>
</div>
</body>
</html>

1 Ответ

4 голосов
/ 30 апреля 2020

Проверьте событие завершения анимации:

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...