幻灯片过渡

QSlideTransitions向上或向下滑动DOM元素（或组件）基于其可见性：在单个元素上一起使用v-show和v-if，类似于Vue的Transition组件，唯一区别是它不是组合过渡（只适用于一个DOM元素或组件）。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QSlideTransition']
}

基本用法

<template>
  <div>
    <q-slide-transition>
      <img
        v-show="visible"
        src="~assets/quasar.jpg"
      >
    </q-slide-transition>

    <q-btn @click="toggleVisibility">
      Toggle
    </q-btn>
  </div>
</template>

<script>
export default {
  ...,
  data: {
    ...,
    visible: true
  },
  methods: {
    ...,
    toggleVisibility () {
      this.visible = !this.visible
    }
  }
}
</script>

您也可以在首次渲染组件（在外观上）时触发动画，方法是指定布尔属性appear：

<q-slide-transition appear>
  ...
</q-slide-transition>

(v0.15.13+) 如果你想在动画结束后触发某些东西，你也可以使用@show和@hideVue事件。

CSS过渡 JS动画