simple box

by ShaCP

HTML

<div class="box">

</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 2000ms;
}

.fade {
  opacity: 0;
}

JavaScript

const box = document.querySelector('.box');
box.addEventListener('click', (e) => {
e.target.classList.toggle('fade');
})

// this makes it blink
/* box.addEventListener('transitionend', (e) => {
e.target.classList.toggle('fade');
}) */

box.addEventListener('transitionend', (e) => {
console.log(e.elapsedTime);
console.log('transition end')
})