html - Get the state of a CSS animation in JavaScript and print it inside an element or on the console so as to later manipulate

admin管理员组

文章数量:1404344

I am trying to replicate a marquee tag using CSS3 animation and I'd like to call a function when the state of the animation changes from running to paused or initial.

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);
}

The line below doesn't yield anything:

animationState.innerHTML = animatedText.style.animationPlayState;

nor does this one. I get a blank <div> and the console also doesn't print anything.

console.log(animatedText.style.animationPlayState);

---

Is it possible to get any of the states so as to manipulate them using Javascript? e.g running|paused|initial|inherit using the doSomething() function.

I am trying to replicate a marquee tag using CSS3 animation and I'd like to call a function when the state of the animation changes from running to paused or initial.

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);
}

The line below doesn't yield anything:

animationState.innerHTML = animatedText.style.animationPlayState;

nor does this one. I get a blank <div> and the console also doesn't print anything.

console.log(animatedText.style.animationPlayState);

---

Is it possible to get any of the states so as to manipulate them using Javascript? e.g running|paused|initial|inherit using the doSomething() function.

• javascript
• html
• css

Share Improve this question Follow edited Jun 26, 2018 at 14:38 ic90 asked Jun 26, 2018 at 14:31 ic90ic90 44444 silver badges1414 bronze badges 1

• 1 This has rather little to do with animations per se, and is rather just the general “problem” that element.style only allows you to read styles that where explicitly set before (style attribute, or JS) - but that is not the case anywhere in your code. Try getComputedStyle instead. – C3roe Commented Jun 26, 2018 at 14:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Odd, I don't know if it's a browser bug or what.. but it seems that you can not, in fact, access that property of the element, even if it's explicitly assigned in the css.

getComputedStyle does seem to work though.

var myVar = setInterval(myTimer, 2000);

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

}

function stopInterval(){
    clearInterval(myVar);
    marqueeText.style.animationPlayState = "paused";
    var putedStyle = window.getComputedStyle(marqueeText)
    printState(putedStyle.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>

Insert snarky ment about marquee being deprecated for a reason here :-p

You could consider using Web Animation API in order to create keyframes based animations and check their status programmatically using a callback when event handler onfinish is being trigged.

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

in case you need to support older browsers you can use this polyfill:

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

or you can use the dom event

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');
  });
}

本文标签：