在 JavaScript 中获取 CSS 动画的状态并将其打印在元素内或控制台上，以便稍后对其进行操作

我正在尝试使用 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() 函数。

奇怪的是，我不知道这是浏览器错误还是什么......但事实上，您似乎无法访问元素的该属性，即使它是在 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