Slide Transition     

QSlideTransitions slides the DOM element (or component) up or down, based on its visibility: works alongside v-show and v-if on a single element, similar to Vue’s Transition component with the only difference being that it’s not a group transition too (it only applies to one DOM element or component).



<q-btn @click="toggleVisibility">

export default {
data: {
visible: true
methods: {
toggleVisibility () {
this.visible = !this.visible

You can also trigger the animation when rendering the component for first time (on appearance) too, by specifying the appear Boolean prop:

<q-slide-transition appear>