Toggle CSS Class Only Works Once

Question

codepen: https://codepen.io/jon424/pen/oNoOQEa

I want to be able to perform this image transition multiple times with several images (there are two in this example). When I click the button, I am able to perform the transition once, and then the toggle (button) won’t work anymore. Any ideas how I can make this button transition work continuously?

HTML

<button id="btn">Toggle</button>
<div id="img1" class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="cover"></div>
</div>

<div id="img2" class="parent">
   <img class="child" src="https://picsum.photos/200/301">
   <div class="cover"></div>
</div>

CSS

.child {
  width: 300px;
  height: 300px;
}

.parent {
  position: relative;
  width: 300px;
  height: 300px;
}

.cover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #fff;
  transition: height 1s ease-in-out;
}

.covered {
  height: 100%;
}

.remove_covered {
  top: 0;
  bottom: auto;
  height: 0;
}

JS

const btn = document.querySelector('button'),
    cover = document.querySelectorAll('.cover');

btn.addEventListener('click', ()=> {
  for (i = 0; i < cover.length; i++){
    if(cover[i].classList.contains('covered')){
    cover[i].classList.add('remove_covered');
  } else {
    cover[i].classList.add('covered');
  }

  cover[i].ontransitionend = () => {
    if(cover[i].classList.contains('remove_covered'))
        cover[i].classList.remove('covered','remove_covered');
    };
  }
});

Toggle CSS Class Only Works Once

0 Answers0