I rendered a page with a css class fade-in effect on images. So that when I load the page I have 4 images that load and they have a fade in effect. Now I have a button that when clicked it changes an image and I want to have the same effect on the new image that appears.
Here is the html code:
<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>
My javascript code is:
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")
}
}
}
My problem is that when I look at the dev-tools in the browser it gets updated but there is no fade in effect.
I tried to do it by creating an attribute and changing it with the setAttribute function. I also tried to remove the class and add it again.
add the class after image is loaded:
var indicator = 0
var img = document.getElementById("card-num-1");
img.onload = () => {
img.classList.add('fade-in-image');
}
function card_reveal_1() {;
img.classList.remove('fade-in-image');
img.setAttribute("src", indicator % 2 ? 'https://via.placeholder.com/250' : 'https://via.placeholder.com/150');
indicator += 1;
}.fade-in-image {
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="card d-flex justify-content-center ml-3 mr-3 mt-3" style="width: 18rem;">
<img id="card-num-1" src="https://via.placeholder.com/350" 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
">load new</button>
</div>
</div>