WedX - журнал о программировании и компьютерных науках

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

Я пытаюсь воспроизвести тег выделения, используя анимацию 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().

javascript html css
26.06.2018

  • Это имеет довольно мало общего с анимацией как таковой, а скорее является общей «проблемой», заключающейся в том, что element.style позволяет вам читать только стили, которые явно установлены ранее (атрибут стиля или JS), но это это не так нигде в вашем коде. Вместо этого попробуйте getComputedStyle. 26.06.2018

Ответы:


1

Странно, я не знаю, ошибка ли это браузера или что... но кажется, что вы на самом деле не можете получить доступ к этому свойству элемента, даже если оно явно назначено в 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

26.06.2018

2

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

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

если вам нужно поддерживать старые браузеры, вы можете использовать этот полифилл:

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');
  });
}
26.06.2018
Новые материалы
Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Для любых предложений по сайту: [email protected]