javascript change attribute wont take effect after attribute set on load

i have a problem hopw sombody can help.
i rendered a page with a css class fade-in effect on images.
so 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 appear.

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 with creating attribute and changing with setattribute node.
i tried to remove the class and set it again.