如何在我的组件中使用“vuetify”过渡效果？

Question

我在我的项目中使用Vuetifyjs库。我想要为我的组件添加过渡效果——但是没有关于如何启动过渡的文档。

例如，我想要为屏幕上我的卡片添加一些过渡效果。

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

如何开始变性过程？

- YanDatsiuk

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。

- jordanw

---

所需的重要文件部分 - ierdna

你知道是否可以通过"hidden-xs-only"这样的类来触发项目出现/消失时的转换效果吗？我有一个组件在小屏幕上会消失，但如果它能以过渡效果退出视图会更好看。 - exhuma

未知的自定义元素：<slide-x-transition> - 您是否正确注册了该组件？ - gpasci

@gpasci 在滑动 x 转换之前，你需要在其前面加上 v-，就像 <v-slide-x-transition> 这样。 - jordanw

谢谢，你说得对，错误很明显。我会再试一次并报告结果。 - gpasci

Answer 2

如果您在router-view周围使用Vuetify过渡效果，离开/进入时，过渡效果有时可能会令人感到突兀。

为了使过渡效果看起来更加平滑，请尝试使用属性hide-on-leave="true"。

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

- BigJoeNH

Answer 3

试试这个：

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

- djaber atia