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).

Installation

Edit /quasar.conf.js:

framework: {
components: ['QSlideTransition']
}

Basic Usage

<template>
<div>
<q-slide-transition>
<img
v-show="visible"
src="~assets/quasar.jpg"
>
</q-slide-transition>

<q-btn @click="toggleVisibility">
Toggle
</q-btn>
</div>
</template>

<script>
export default {
...,
data: {
...,
visible: true
},
methods: {
...,
toggleVisibility () {
this.visible = !this.visible
}
}
}
</script>

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>
...
</q-slide-transition>

(v0.15.13+) You can also use @show and @hide Vue events if you want to trigger something after animation is over.

Vue Properties

Vue PropertyTypeDescription
appearBooleanApply animation when first rendered too.
durationNumber(v0.17.13+) Animation duration in milliseconds. Default: 300