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

您可以考虑使用Web动画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

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

2 个答案: