Usuwanie i dodawanie klasy z CSS

Mam animację w CSS ze znikaniem i pojawieniem się menu:

@keyframes disapperance {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0; display: none;}
}

@-webkit-keyframes disapperance {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0; display: none;}
}

@keyframes apperance {
    0% {opacity: 0; display: block;}
    50% {opacity: 0.5;}
    100% {opacity: 1; }
}

@-webkit-keyframes apperance {
    0% {opacity: 0; display: block;}
    50% {opacity: 0.5;}
    100% {opacity: 1; }
}

.disapperanceClass {
    -webkit-animation: 2s 1 disapperance;
    animation: 2s 1 disapperance;
    opacity: 0;
}

.apperanceClass {
    -webkit-animation: 2s 1 apperance;
    animation: 2s 1 apperance;
    opacity: 1;
}

i w JS chcę go użyć podczas przewijania strony:

function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            navbar.classList.toggle("disapperanceClass");
        }
    })

i teraz działa znikanie menu, natomiast gdy przed if dodam navbar.classList.remove("disapperanceClass"; navbar.classList.add("apperanceClass"); a wif navbar.classList.remove("apperanceClass"); to zupełnie nie działa i nie wiem dlaczego

Żeby sprawdzić obecność klasy w elemencie użyj:

el.classList.contains('klasa');

Ok mały debugging pomógł:

function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            if(navbar.classList.contains("apperanceClass")) {
                navbar.classList.remove("apperanceClass");
                navbar.classList.add("disapperanceClass");
            } else {
                navbar.classList.remove("disapperanceClass");
                navbar.classList.add("apperanceClass");
            }
        }
    })

Jeszcze jedno pytanko, dlaczego kółko myszki nadal zmienia klasy, mimo iż nie jest spełniony warunek w if?

window.onscroll = function () { stickyMenu() };

const navbar = document.querySelector("header");
const sticky = navbar.offsetTop;

function stickyMenu() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky");
        hiddenMenu();
    } else {
        navbar.classList.remove("apperanceClass");
        navbar.classList.remove("disapperanceClass");
        navbar.classList.remove("sticky");
    }
}
function hiddenMenu() {
    window.addEventListener('wheel', (e) => {
        if (e.isTrusted) {
            if (navbar.classList.contains("apperanceClass")) {
                navbar.classList.remove("apperanceClass");
                navbar.classList.add("disapperanceClass");
            } else {
                navbar.classList.remove("disapperanceClass");
                navbar.classList.add("apperanceClass");
            }
        }
    })