Я хочу, чтобы цвет и размер блока div анимировались и возвращались к исходным значениям при нажатии кнопки. Вот мой пример кода:

document.getElementById("andAction").addEventListener("click", function() {
    document.getElementById("box").classList.toggle("animi");
})
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width:20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}


@keyframes blob {
  0%  { 
         background-color: #999;
      }
  50% { 
        background-color: #F9086D;
        transform: scale(2);
        background-color: red;
        border-radius: 20px;
      }
  100% { 
        background-color: #999;          
      }
 }

.animi {
  animation-name: blob;
  animation-duration:3s;
  animation-iteration-count:1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

Проблема

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

Вопрос

Такое ощущение, что есть другой способ?

1
Maik Lowrey 15 Окт 2021 в 16:30

2 ответа

Лучший ответ

Просто добавьте несколько js, чтобы автоматически удалить класс после завершения анимации, и измените исходное поведение, чтобы не переключаться, а просто добавить класс. Вы можете добиться этого, используя https: //developer.mozilla. org / en-US / docs / Web / API / HTMLElement / animationend_event.

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>
0
Fabian Schöner 15 Окт 2021 в 13:43

Вы можете прослушать событие onanimationend, чтобы удалить класс по окончании анимации, не полагаясь на таймеры, которые сложнее поддерживать:

const boxElement = document.getElementById("box")

boxElement.addEventListener('animationend', (e) => {
  // if the target it the box (it's triggered by animations on children too)
  // and the animation name is `blob` (it's triggered by any animation)
  // remove the class
  if (e.target === boxElement && e.animationName === "blob") {
    boxElement.classList.remove('animi');
  }
})

document.getElementById("andAction").addEventListener("click", function() {
    boxElement.classList.add("animi");
})
1
arieljuod 15 Окт 2021 в 13:41