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

  • 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.