Как добавить css анимацию в javascript коду через . style

Question

Есть код javascript:

document.getElementById('click').addEventListener('click', function() {
    document.getElementById('click').style.animation = "img_show"
} )

и css:

@keyframes show {
    0% {
        opacity: 0.2;
        scale: 0;
    }
}
.img_show {
    transition: 100ms;
    animation: show 200ms;
}

и html:

<img src="url картинки" id="click" class="img_show" alt="печенка">

Я пытался добавить анимацию к картинке с помощью .style в javascript коде, но не получилось. скажите пожалуйста как это сделать, но только при клике

Answer 1

В animation надо вставить имя анимации и параметры анимации

document.getElementById('click').addEventListener('click', function() {
    document.getElementById('click').style.animation = "show 1s linear infinite"
} )

@keyframes show {
    0% {
        opacity: 0.2;
        scale: 0;
    }
}
.img_show {
    transition: 100ms;
    animation: show 200ms;
}

<img src="url картинки" id="click" class="img_show" alt="печенка">

Ну или добавить просто класс с анимацией (обратите внимание, что для демонстрации я добавил немного данных в CSS и удалил класс у элемента):

let myElement = document.getElementById('click');

myElement.addEventListener('click', () => {
    myElement.classList.add('img_show')
});

myElement.addEventListener("animationend", () => {
    myElement.classList.remove('img_show')
});

@keyframes show {
    0% {
        opacity: 0.2;
        scale: 0;
    }
}
.img_show {
    transition: 100ms;
    animation: show 1000ms;
}

<img src="url картинки" id="click" alt="печенка">

БЛОГ НА HUSL

Как добавить css анимацию в javascript коду через . style

Ответы (1 шт):