Representé una página con un efecto de fundido de clase css en las imágenes. Entonces, cuando cargo la página, tengo 4 imágenes que se cargan y tienen un efecto de desvanecimiento. Ahora tengo un botón que cuando se hace clic cambia una imagen y quiero tener el mismo efecto en la nueva imagen que aparece.

Aquí está el código html:

 <div class="card d-flex justify-content-center ml-3 mr-3 mt-3" style="width: 18rem;"> <img id="card-num-1" src="/static/TarotCards/tarot-back/tarot-back.jpg" class="card- img-top fade-in-onload" alt="..." style="width: 180px;height: 300px; margin-left: 18%;"> <div class="card-body justify-content-center"> <h5 class="card-title">Card title</h5> <p id="wow" class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button id="reveal-1" onclick="card_reveal_1()" class="btn btn-outline-dark ">reveal</button> <button id="replace_1" onclick="replaceCard_1()" disabled="true" class="btn btn- outline-dark rep">replace</button> </div> </div>

Mi código javascript es:

 function card_reveal_1() { document.getElementById("card-num-1").setAttribute("src", `/{{ cards[0]["CARD_PATH"] }}`); let toDisable = document.createAttribute("disabled"); toDisable.value = "true"; document.getElementById("reveal-1").setAttribute("disabled", "true"); // -------- that is the place that the set attribute happen ------ let fade = document.getElementsByClassName("card-img-top") fade[0].setAttribute("class", "card-img-top wow wow fade-in-image") // -------------------------------------- indicator += 1; if (indicator == 4) { let toEnable = document.getElementsByClassName("rep"); for (let i = 0; i < toEnable.length; i++) { toEnable[i].removeAttribute("disabled") } } }

Mi problema es que cuando miro las herramientas de desarrollo en el navegador, se actualizan pero no se desvanecen.

Traté de hacerlo creando un atributo y cambiándolo con la función setAttribute . También traté de eliminar la clase y agregarla nuevamente.