The Quasar Transition component (called QTransition) gives transitional animation behavior to any components or HTML elements, which are wrapped by it. It is basically a simplification of the Vue Transition Component. The transitions are used for entering (appearing) or leaving (disappearing) animations.
The animation effects are borrowed from Animate.css. So there are 12 general, 32 entering (In) and 32 leaving (Out) animation types currently available for you to use out of the box. Check the list either on Animate.css website or on the demo available for this page.
To use QTransition component, simply wrap a component or HTML element with the transition component and add the necessary properties to it.
It’s also important that you import the CSS animation(s) from
quasar-extra package as none will be supplied by default in order to reduce the footprint of your website/app.
In you Vue component where the template contains a QTransition or in
src/App.vue (if you are using in multiple places), import the animations like this:
If you are building a website, you can also replace “quasar-extras” imports and use a CDN link which points to Animate.css like this (following is just an example, Google for latest link). Remember this will require an Internet connection for your user, as opposed to bundling from “quasar-extras”.
You can also group components or DOM elements in a QTransition so that the same effects are applied to all of them simultaneously.
Please note two things in the above example.
groupproperty must be added to animate a group of components and/or DOM elements.
- The components and DOM elements must be keyed, like
key="email-button"in the example above.
- Both examples above have the Boolean property
appearspecified, which makes the entering animation kick in right after component(s) have been rendered. This property is optional.
There are several properties within the transition component.
|Boolean||Should the entering (In) animation occur right after rendering DOM / component?|
|String||The animation for transitioning into the screen.|
|String||The animation for transitioning out of the screen.|
|Boolean||For transitions on a group of components or DOM elements.|
|Number||The time in milliseconds the transition should take.|
|String||Used for custom animations, just like on the Vue Transition component.|
leaveproperties are necessary, for the transition to work properly, unless you specify
nameproperty which tells QTransition to use a custom animation defined by your own CSS classes.
You can use these events to control state, which controls the display logic.
If the default animations supplied with Quasar are not enough, QTransition also allows you to specify custom animations defined by CSS classes in your website/app. This works much like Vue’s Transition component (which it wraps) when specifying the
If you are only interested in using a custom transition, then it’s more efficient to use Vue’s internal
<transition>component. Adding this feature for QTransition is just for convenience so you can dynamically switch from and to an Animate.css animation to a custom one if you like.
Note. The following information (including the image) is taken from Vuejs official documentation for convenience, since QTransition is a wrapper for Vue’s internal Transition component.
There are six CSS classes applied for enter/leave transitions. Replace
v with the name of your custom animation (which you will supply QTransition as
v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
v-enter-to: Ending state for enter. Added one frame after element is inserted (at the same time
v-enteris removed), removed when transition/animation finishes.
v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
v-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time
v-leaveis removed), removed when the transition/animation finishes.
Each of the classes mentioned above are prefixed with
v-, but if for example you are defining a custom transition named
v-enter class would instead be
custom-anim-enter (and so on for all others).
v-leave-active give you the ability to specify different easing curves for enter/leave transitions.