Add animate.css

    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'
    1. add <transition> to the element/component you want to animate
      more info here:
    <div class="row">
                <button @click="toggle = !toggle">
                  enter-active-class="animated bounceInLeft slow"
                  leave-active-class="animated bounceOutLeft slow">
                  <button v-if="toggle">ANIMATION</button>

    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

    You can control speed by adding your own class:

      .slow {
        -webkit-animation-duration : 1s;

  • Admin

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

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.