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