JS Animations     

You can create animations through Javascript (using RAF - requestAnimationFrame()) with Quasar.

import { animate } from 'quasar'

let id = animate.start({
  name: 'unique-animation-name', // optional, if none is supplied a unique one is created and returned
  from: '0', // current position
  to: '100', // final position
  duration: 300, // duration of the animation
  done (finalPosition) {...}, // function to call when animation is done
  cancel (currentPosition) {...}, // function to call when animation is aborted
  apply (currentPosition) {...}, // function called on each step so you can apply changes
  easing (currentPosition) { // custom easing function, see below
    // ...return transformation of currentPosition...
  }
})
// Starting an animation with same name will abort the previous one

// Stop an animation using its name
animate.stop('unique-animation-name')
// or
animate.stop(id) // id returned from above

Example:

import { animate } from 'quasar'

animate.start({
  from: 6,
  to: 158,
  apply (pos) {
    el.style.maxHeight = `${pos}px`
  },
  done () {
    console.log(`we're done!`)
  }
})

Easing Functions

Easing functions take the current percent progress of the animation (a float between 0 and 1) and return a position multiplier (0 being initial position and 1 being final position).

The following easing functions are included:

Material Design Curves:

Example:

import { animate, easing } from 'quasar'

animate.start({
  from: 0,
  to: 100,
  easing: easing.standard
  ...
})

Or with the carousel:

<template>
  <q-carousel :swipe-easing="overshoot">
    Slides...
  </q-carousel>
</template>
<script>
import { easing, QCarousel } from 'quasar'
export default {
  components: {
    QCarousel
  },
  data: () => ({
    overshoot: easing.overshoot
  })
}
</script>

Slide Transition Animation CSS Helper Classes
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub