Add animate.css

[Martin]

1. " npm install animate.css --save" in your project directory

2. import in main.js

import Vue from 'vue'
import Quasar from 'quasar'
import 'animate.css/animate.min.css'

3. 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;
  }

[rstoenescu]

Excellent. There’s even a package called vue-animate, but it’s unclear if it works with Vue 2.

[n.taddei]

Is there any way to use transition on Quasar tab content?

[rstoenescu]

Haven’t analyzed this for v0.13, but you’ll be able to do this on v0.14 for sure.

[n.taddei]

@rstoenescu Can’t wait to see it then!!!
Any news about release date?

[rstoenescu]

We’re a few weeks from releasing it. Currently working on documentation.