Add animate.css

Martin

" 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;
  }

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.

No More Posting New Topics!

Add animate.css