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


Edit /quasar.conf.js:

framework: {
components: ['QSlideTransition']

Basic Usage


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

(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