Transiciones

Hay otro componente que se llama transition-group, creado especialmente para listas, o elementos renderizados con v-for. Estos permiten darle un comportamiento igual el expuesto por la profe pero a los elementos que se insertan o se remueven del DOM. Vale la pena darle una mirada

El codigo de la clase para facil acceso y que se concentren mas en la clase y definiciones.

desde App.vue

<template>
  <button @click="show = !show">Menu</button>
  <transition name="fade">
    <Menu v-show="show" />
  </transition>
</template>

<script>
import Menu from "./components/vMenu.vue";
export default {
  name: "App",
  components: { Menu },
  data() {
    return {
      show: false,
    };
  },
};
</script>

AHora la parte de los estilos:

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

y desde el componente Menu.vue

<template>
  <ul>
    <li>Opcion 1</li>
    <li>Opcion 2</li>
    <li>Opcion 3</li>
  </ul>
</template>

Vaya, qué interesante componente de Vue JS, lleva la forma de usar CSS a algo distinto.

Por cierto, Platzi tiene 2 cursos de animaciones con CSS:

1. Curso de Animaciones con CSS
2. Curso Práctico de Maquetación y Animaciones con CSS