CSS Transitions can be handled by the Vue Transition Component. The transitions are used for entering (appearing) or leaving (disappearing) animations.
However, Quasar can supply a big list of ready to use CSS animations. The animation effects are borrowed from Animate.css. So there are 80+ animation types 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.
Please refer to Vue documentation for learning on how to use the Vue supplied
<transition>component.
Installation
Edit the /quasar.config file:
// embedding all animations
animations: 'all'
// or embedding only specific animations
animations: ['bounceInLeft', 'bounceOutRight']If you are building a website, you can also skip configuring the quasar.config file 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 within the quasar.config file.
<head>
...
<!-- CDN example for Animate.css -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>WARNING
It should be noted that when you import Animate.css through the <link> tag, all animation CSS classes must be prefixed with animate__. This is a breaking change in the migration of Animate.css from v3 to v4. If you want to avoid using prefixes, you can import the compat version.
However, if you’re using the Quasar CLI, no additional changes are needed.
WARNING
Windows Developers If you’re developing on Windows and the animations don’t appear to be working, it’s likely an OS level setting that’s to blame. Try changing Visual Effects to Adjust for Best Appearance.
- Right click
My Computerand selectProperties - Click
Advanced System Settings - Click the
Settingsbutton underPerformance - Under the
Visual Effectstab, change the radio option to:Adjust for Best Appearance
Usage
WARNING
Notice the string animated in front of the actual animation class name.
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<!-- Wrapping only one DOM element, defined by QBtn -->
<q-btn color="secondary" icon="mail" label="Email" />
</transition>Built-in animation classes
Quasar also provides some built-in classes to animate the active state between both enter and leave transitions. The animations provided are separated into three groups (click on them to expand):
You can also go to the official Vue documention for more information about the use of these classes.
Modifier classes
There are additional classes which delay or repeat or change the speed of the animations (click to expand):
Example:
<transition
appear
enter-active-class="animated fadeIn slower delay-5s repeat-2"
leave-active-class="animated fadeOut"
>
<!-- Wrapping only one DOM element, defined by QBtn -->
<q-btn color="secondary" icon="mail" label="Email" />
</transition>Wrapping Multiple Elements
You can also group components or DOM elements in a transition so that the same effects are applied to all of them simultaneously.
<transition-group
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<!-- We wrap a "p" tag and a QBtn -->
<p key="text"> Lorem Ipsum </p>
<q-btn key="email-button" color="secondary" icon="mail" label="Email" />
</transition-group>Please note some things in the above example:
- Note
<transition-group>instead of<transition>. - The components and DOM elements must be keyed, like
key="text"orkey="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.