Menu mobilne - prośba o weryfikacje kodu i porady

Witam, stworzyłem w Vue komponent menu mobilnego. Zawartość jeszcze jest pusta. Działa ale chciałbym prosić o porady. Usunąłem fragment <template> ponieważ nic on nie wnosi do tematu. Bardziej zastanawiam się czy można było funkcję toggleMenu inaczej napisać i oszczędzić sobie funkcji remove i add...

<script setup>
import { ref } from "vue";

const menuOpened = ref(false);

const toggleMobileMenu = () => {
  const menu = document.getElementById("mobileMenu");

  if (menuOpened.value === true) {
    menuOpened.value = false;
    console.log("Zamykamy menu!!");
    menu.classList.remove("mobile-menu-open-animation");
    menu.classList.add("mobile-menu-close-animation");
  } else {
    menuOpened.value = true;
    console.log("Otwieramy menu!!!");
    menu.classList.remove("mobile-menu-close-animation");
    menu.classList.add("mobile-menu-open-animation");
  }
};
</script>

<style>
.mobile-menu-open-animation {
  animation-name: mobileMenuOpen;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes mobileMenuOpen {
  to {
    transform: translateY(100%);
  }
}

.mobile-menu-close-animation {
  animation-name: mobileMenuClose;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes mobileMenuClose {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
</style>

const menu = document.getElementById("mobileMenu");
...
menu.classList.remove("mobile-menu-open-animation");

Jeśli robisz to na czystym DOM, to po co w ogóle używasz Vue?

Albo odwrotnie - czemu odwołujesz się do DOMu i ręcznie zmieniasz klasę, zamiast użyć Vue do tego?
https://vuejs.org/guide/essentials/class-and-style.html

Krwawy Ork napisał(a):

Bardziej zastanawiam się czy można było funkcję toggleMenu inaczej napisać i oszczędzić sobie funkcji remove i add...

const toggleMobileMenu = () => {
 const menu = document.getElementById("mobileMenu");

 if (menuOpened.value === true) {
   menuOpened.value = false;
   console.log("Zamykamy menu!!");
   menu.classList.remove("mobile-menu-open-animation");
   menu.classList.add("mobile-menu-close-animation");
 } else {
   menuOpened.value = true;
   console.log("Otwieramy menu!!!");
   menu.classList.remove("mobile-menu-close-animation");
   menu.classList.add("mobile-menu-open-animation");
 }
};

Właściwość classList udostępnia nam metodę toggle https://developer.mozilla.org/en-US/docs/Web/API/Element/classList i można uprościć cały zapis do kilku linijek

const toggleMobileMenu = () => {
  const menu = document.getElementById("mobileMenu");

  menuOpened.value = !menuOpened.value;

  menu.classList.toggle("mobile-menu-open-animation", menuOpened.value);
  menu.classList.toggle("mobile-menu-close-animation", !menuOpened.value);
};

ale tak jak wspomniał @LukeJL nie powinieneś korzystać z getElementById i classList, tylko wykorzystać to co oferuje Vue

ok dzięki za odpowiedzi i wsparcie, sprawdzę obydwa rozwiązania!

getElementById tez się nie powinno uzywac, tylko przypisac ref'a do elementu

Ok. Udało się zrobić wg. dokumentacji Vue. Jedna ważna rzecz, menuOpened ref musi być null. Nie może być false, ponieważ zaraz po wczytaniu komponentu pojawia się animacja zamknięcia menu.

edit: po załadowaniu komponentu widzi przypisaną wartość menuOpened = false i wtedy przypisuje aktywną klasę mobile-menu-close-animation i włącza się animacja. Robi się wtedy takie estetyczne błeee dlatego musi być null aby żadnej klasy nie komponent nie miał przypisanej po załadowaniu.

const menuOpened = ref(null);

const toggleMobileMenu = () => {
  menuOpened.value = !menuOpened.value;
};

 :class="{
      'mobile-menu-open-animation': menuOpened === true,
      'mobile-menu-close-animation': menuOpened === false,
    }"

to ciekawe, mozesz wrzucic na jakis codesandbox demonstracje?