javascript 如何在我的组件上使用“vuetify”转换？

wlsrxk51 于 12个月前发布在 Java

关注(0)|答案(3)|浏览(85)

我在我的项目中使用Vuetifyjs library。我想向我的组件添加过渡-但没有关于如何启动过渡的文档。
例如，我想添加一些过渡到我的卡在屏幕上的外观。

<v-card transition="v-slide-y-transition">
  <!-- content -->
</v-card>

字符串
如何开始转型？

3条答案

这会在过渡中 Package 一些卡片文本。当我触发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。

如果你在路由器视图周围使用Vuetify过渡，过渡有时会在离开/进入时不和谐。
要使过渡看起来更平滑，请尝试 prop hide-on-leave="true"

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

字符串

试试这个：

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

字符串