如何在我的组件上使用“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() 方法，在组件加载后触发显示为 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>

Answer 3

试试这个：

<v-fab-transition appear>
  <p>hello</p>
</v-fab-transition>