Add animate.css
-
-
" npm install animate.css --save" in your project directory
-
import in main.js
import Vue from 'vue' import Quasar from 'quasar' import 'animate.css/animate.min.css'
- add <transition> to the element/component you want to animate
more info here: https://vuejs.org/v2/guide/transitions.html#Custom-Transition-Classes
<div class="row"> <button @click="toggle = !toggle"> toggleIt </button> <transition name="custom-classes-transition" enter-active-class="animated bounceInLeft slow" leave-active-class="animated bounceOutLeft slow"> <button v-if="toggle">ANIMATION</button> </transition> </div>
It’s basically just wrapping the vue <transition> tag around an element with attribute like v-if etc. (that can listen to vue transitions.)
Then add the enter and leave classes.
“animated”: a “signal” for animate.css to do something
“bounceInLeft etc” : animate.css animations https://daneden.github.io/animate.css/You can control speed by adding your own class:
.slow { -webkit-animation-duration : 1s; }
-
-
Excellent. There’s even a package called
vue-animate
, but it’s unclear if it works with Vue 2. -
Is there any way to use transition on Quasar tab content?
-
Haven’t analyzed this for v0.13, but you’ll be able to do this on v0.14 for sure.
-
@rstoenescu Can’t wait to see it then!!!
Any news about release date? -
We’re a few weeks from releasing it. Currently working on documentation.