No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Add animate.css

    Show & Tell
    3
    6
    5840
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Martin
      Martin last edited by

      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;
        }
      
      1 Reply Last reply Reply Quote 2
      • rstoenescu
        rstoenescu Admin last edited by

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

        1 Reply Last reply Reply Quote 0
        • N
          n.taddei last edited by

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

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

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

            N 1 Reply Last reply Reply Quote 0
            • N
              n.taddei @rstoenescu last edited by

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

              1 Reply Last reply Reply Quote 0
              • rstoenescu
                rstoenescu Admin last edited by

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

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post