如何在我的组件上使用"vuetify"转换？

Question

我正在我的项目中使用Vuetifyjs库.我想向我的组件添加转换 - 但是没有关于如何启动转换的文档.

例如,我想在屏幕上添加一些转换到我的卡的外观.

<v-card transition="v-slide-y-transition">...</v-card>

如何开始转型？

Answer 1

这会在转换中包含一些卡片文本​​.当我触发v-show ="show"模型为true时,文本会滑入.

<v-slide-y-transition>
  <v-card-text v-show="show">
    Example text
  </v-card-text>
</v-slide-y-transition>

您可以使用按钮触发它,甚至可以添加onCreate()方法,该方法在组件加载后触发show为true.

Answer 2

如果您在路由器视图周围使用 Vuetify 转换，则转换有时会在离开/进入时不和谐。

为了使过渡看起来更平滑尝试道具 hide-on-leave="true"

<v-scroll-x-transition mode="in" hide-on-leave="true">
  <router-view></router-view>
</v-scroll-x-transition>