Как изменить состояние чекбокса через некоторое время после нажатия?

Question

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

Есть скрипт который будет выключать чекбокс через определенное время, в моем случае после срабатывания анимации?

div {
    width: 50px;
    height: 50px;
    background: #000;
    position: absolute;
    top: 40px;
}
#ch1:checked ~ div {
    animation: down .5s ease;
}

@keyframes down {
    0% {top: 40px;}
    50% {top: 80px;}
    100% {top: 40px;}
}

<input id="ch1" type="checkbox">
<div></div>

Answer 1

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

_id("ch1").addEventListener("click", function() {
  this.style.display = "none";
});

_id("box").addEventListener("animationend", function() {
  let cb = _id("ch1");
  cb.style.display = "";  
  
  cb.checked = false;
});

function _id(str) { return document.getElementById(str); }

div {
  width: 50px;
  height: 50px;
  background: #000;
  position: absolute;
  top: 40px;
}

#ch1:checked ~ div {
  animation: down .5s ease;
}

@keyframes down {
  0% { top: 40px; }
  50% { top: 80px; }
  100% { top: 40px; }
}

<input id="ch1" type="checkbox">
<div id="box"></div>

БЛОГ НА HUSL

Как изменить состояние чекбокса через некоторое время после нажатия?

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