Получите состояние CSS-анимации в JavaScript и распечатайте его внутри элемента или на консоли, чтобы впоследствии управлять им

Question

Я пытаюсь повторить тег выделения с помощью CSS3-анимации, и я хотел бы вызвать функцию, когда состояние анимации меняется с запуска на приостановленное или начальное.

HTML:

<div class='animationBackground'><p id="marqueeText">Scrolling Text Goes Here</p></div>
<div id="animationState">Animation State</div>
<button id='stop' type"button" onclick=stopInterval()>Stop Logging</button>

CSS:

@keyframes marquee
    {
        0%   { transform: translate(0%, 0); }
        100% { transform: translate(-200%, 0);}
    }

    p {
        margin-left: 100%;
        padding-inline-end: 50px;
        display: inline-block;
        white-space: nowrap;
        color: #ffffff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30pt;
        z-index: 10;
        animation: marquee 25s linear 0s 1
    }

    .animation{
        width: 100%;
        background-color: darkblue;
        vertical-align: bottom;
    }

JavaScript:

var myVar = setInterval(myTimer, 5000);

function myTimer() {
    var marqueeText = document.getElementById('marqueeText');
    var animationState = document.getElementById('animationState');
    animationState.innerHTML = marqueeText.style.animationPlayState;
    console.log(marqueeText.style.animationPlayState);

    if(marqueeText.style.animationPlayState == "running"){
        doSomething();
    }

}

function stopInterval(){
    clearInterval(myVar);
}

Строка ниже ничего не дает:

animationState.innerHTML = animatedText.style.animationPlayState;

и этот тоже. Я получаю пустое значение <div>, и консоль также ничего не печатает.

console.log(animatedText.style.animationPlayState);

---

Можно ли получить какое-либо из состояний, чтобы манипулировать ими с помощью Javascript? например, running|paused|initial|inherit с использованием функции doSomething ().

Answer 1

Можно рассмотреть возможность использования API веб-анимации для создания анимаций на основе ключевых кадров и программной проверки их состояния с помощью обратного вызова при срабатывании обработчика события onfinish.

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

В случае, если вам нужна поддержка старых браузеров, вы можете использовать этот polyfill:

https://github.com/web-animations/web-animations-js

или вы можете использовать событие dom

window.onload = function() {
  var elm = document.querySelector('.marquee'); // get dom with your animation

  elm.addEventListener('animationend', function(e) { 
    console.log('fires when animation ends');
  });
  elm.addEventListener('animationstart', function(e) { 
    console.log('fires when animation starts');
  });
}

Answer 2

Странно, я не знаю, является ли это ошибкой браузера или чем-то еще ... но кажется, что вы не можете получить доступ к этому свойству элемента, даже если оно явно назначено в CSS.

getComputedStyle, кажется, работает, хотя.

var myVar = setInterval(myTimer, 2000);

var marqueeText = document.getElementById('marqueeText');
function myTimer() {
    var computedStyle = window.getComputedStyle(marqueeText);
    printState(computedStyle.animationPlayState);
    if(computedStyle.animationPlayState == "running"){
        //doSomething();
    }

}

function stopInterval(){
    clearInterval(myVar);
    marqueeText.style.animationPlayState = "paused";
    var computedStyle = window.getComputedStyle(marqueeText)
    printState(computedStyle.animationPlayState);
}

function printState(state){
  var animationState = document.getElementById('animationState');
  console.log(state);
  animationState.innerHTML = state;
}

@keyframes marquee
    {
        0%   { transform: translate(0%, 0); }
        100% { transform: translate(-200%, 0);}
    }

    p {
      color:#000;
        margin-left: 100%;
        padding-inline-end: 50px;
        display: inline-block;
        white-space: nowrap;
        
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30pt;
        z-index: 10;
        animation: marquee 25s linear 0s 1;
        
    }

    .animation{
        width: 100%;
        background-color: darkblue;
        vertical-align: bottom;
    }

<div class='animationBackground'><p id="marqueeText">Scrolling Text Goes Here</p></div>
<div id="animationState">Animation State</div>
<button id='stop' type"button" onclick=stopInterval()>Stop Logging</button>

Вставьте язвительный комментарий о том, что шатёр не рекомендуется по какой-то причине здесь : -p