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.