1

Мне нужно чтобы была возможность из меню, по клику изменить длительность анимации

получаю элемент: let anim = document.getElementByClassName('animator'); вывожу в консоль что имею: console.log(anim); - сам элемент выводится вывожу в консоль стили: console.log(anim.style) - получаю undefined - нет сакого свойства в этом объекте Выходит что до анимации я не могу даже добраться, не то чтобы установить.

1
  • Если использую getElementById() - тогда есть доступ к anim.styles.animationDuration, но все значения стилей пустые - "" - и при установке anim.styles.animationDuration = '5s' ничего не меняется(
    – VladIs
    21 дек 2022 в 16:19

1 ответ 1

0

Что-то такое?

let block = document.getElementById('block');

function change() {
  block.style.setProperty('--duration', '1s');
}
.button {
  position: absolute;
  bottom: 0;
}

#block {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  right: 100%;
  animation: anim infinite var(--duration);
}

@keyframes anim {
  50% {
    right: 0;
  }
}
<div id="block" style="--duration: 5s"></div>
<button onclick="change()" class="button">Изменить</button>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.