2 formas diferentes de simular el efecto de slideToggle de jQuery usando Vue.js. Este efecto muy usado para mostrar y ocultar los elementos con una transición flexible se puede conseguir de varias formas con Vue. A continuación 2 ejemplos:
A) La primera la más sencilla usando clases css para las transiciones: Apenas declaramos un objeto «toggle» y creamos las 2 clases css que crea vue en función del nombre que pongamos al componente transition.
B) La segunda forma usando la librería GSAP para las transiciones. La transición es mucho más fluida como podemos ver en el ejemplo. En esta ya nos hace falta crear 2-3 métodos para usar gsap al expandir/contraer:
Para más información sobre transiciones con Vue: https://vuejs.org/v2/guide/transitions.html
Si quieres puedes ver otro post en el que hice el efecto con vanillaJS: https://www.bufa.es/vanilla-js-slidetoggle/
Agradezco tu comentario 🤘