如何使用" vuetify"转换到我的组件?

时间:2017-06-22 07:27:14

标签: javascript components material-design vuetify.js

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

例如,我想在屏幕上添加一些过渡到我的卡片的外观。

 Create Table [myschema].[ELMAH_Error] //instead [dbo]
 ...........
 ...........

 CREATE PROCEDURE [myschema].[ELMAH_GetErrorXml] //instead [dbo]
 ...........
 ...........

如何开始过渡?

2 个答案:

答案 0 :(得分:23)

这会在转换过程中包含一些卡片文本​​。当我触发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。

答案 1 :(得分:2)

如果您在路由器视图周围使用Vuetify过渡,则过渡有时会在离开/进入时受到阻碍。

要使过渡看起来更平滑,请尝试使用道具hide-on-leave="true"

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