Отметьте javascript, если анимация CSS3 в настоящее время выполняется для элемента DOM

Question

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

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

Теперь, если я действительно укажу анимацию в css, все будет работать нормально, потому что я откладываю логический код с обратным вызовом в конце анимации. Моя проблема в том, что я не могу добиться того же, если для элемента не задана анимация.

Я бы хотел что-то похожее:

function buttonClick($button) {
     $button.addClass('activated');
     $button.one('animationend', function() {
         // ... run the logic here
     });

     if (...no animation specified in activated class) {
        // ... run the logic here
     }
}

ПРИМЕЧАНИЕ : Я использую здесь jQuery, если для этого есть метод, указанный c в jQuery, это тоже подойдет мне, но простой метод javascript тоже подойдет. Я слышал о селекторе jQuery(":animated"), но когда я его тестировал, мне показалось, что он работает только для анимаций, начинающихся с самого jQuery, а не с CSS3.

Answer 1

Поскольку вы, кажется, используете animation CSS для своей анимации (при условии, что вы используете событие animationend), вы можете использовать getComputedStyle для проверки содержимого свойства animation-name CSS.

Вот демонстрация с двумя кнопками: одна запускает анимацию при нажатии, а другая нет:

$("button").click(function () {
    buttonClick($(this));
});

function hasAnimation($button) {
    return getComputedStyle($button[0], null)["animation-name"] != "none";
}

function onEndAnimation($button) {
    $button.removeClass('activated');
    console.log("animation complete on button " + $button.text());
}

function buttonClick($button) {
    $button.addClass('activated');
    $button.one('animationend', () => onEndAnimation($button));
    if (!hasAnimation($button)) onEndAnimation($button);
}

#yes.activated {
    animation-duration: 1s;
    animation-name: grow;
}

@keyframes grow {
  from { width: 50px; }
  50% { width: 100px; }
  to { width: 50px; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yes" style="width: 50px">Yes</button><br>
<button id = "no" style="width: 50px">No</button>