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

Quiero poder realizar esta transición de imagen varias veces con varias imágenes (hay dos en este ejemplo). Cuando hago clic en el botón, puedo realizar la transición una vez y luego el interruptor (botón) ya no funcionará. ¿Alguna idea de cómo puedo hacer que la transición de este botón funcione continuamente?

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'); }; } });