JS动画

您可以使用Quasar通过Javascript（使用RAF - requestAnimationFrame()）创建动画。

import { animate } from 'quasar'

let id = animate.start({
  name: 'unique-animation-name', // 可选，如果没有提供，则创建并返回唯一的一个
  from: '0', // 当前位置
  to: '100', // 最后位置
  duration: 300, //动画的持续时间
  done (finalPosition) {...}, //在动画完成时调用的函数
  cancel (currentPosition) {...}, // 在动画中止时调用的函数
  apply (currentPosition) {...}, // 每个步骤调用的函数，以便您可以应用更改
  easing (currentPosition) { // 自定义缓动函数，请参见下文
    // ...返回当前位置的变换...
  }
})
//开始一个相同名称的动画将中止前一个动画

//使用动画名称停止动画
animate.stop('unique-animation-name')
// 或者
animate.stop(id) // 从上面返回的ID

例子:

import { animate } from 'quasar'

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

缓动（Easing）函数

缓动函数取当前动画百分比进度（0和1之间的浮点数）并返回位置乘数（0表示初始位置，1表示最终位置）。

包括以下缓动函数：

Material Design Curves：

例如：

import { animate, easing } from 'quasar'

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

或者用转盘：

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

幻灯片过渡 动画CSS辅助类