如何验证页面转换？

Question

我有一个带有 vuetify 的 spa vue 页面，当我在应用程序的组件之间切换时，我希望组件显示一个过渡。我尝试使用 <v-slide-y-transition> 标签和 transition="slide-y-transition 属性，但没有任何效果。这里有一些我尝试过的例子：

带有 "vuetify tag" 的示例：

    <template>
      <v-app>
        <v-slide-y-transition>
          <h1>Test</h1>
        </v-slide-y-transition>
      </v-app>
    </template>

属性示例：

   <template>
      <v-app>
        <div transition="slide-y-transition">
          <h1>Test</h1>
        </div>
      </v-app>
   </template>

Answer 1

您拥有的 Vuetify 转换仅适用于 Vuetify 库组件。例如 <v-menu transition="slide-x-transition"> 其中 v-menu 是组件之一。您不能在简单的 <div>.

上使用这种方式的转换

但是，Vue.js 本身支持 transitions 使用以下格式。

<transition name="slide">
    <div> element you are apply the transition to</div>
</transition>

您必须根据文档 here. or you can use a css library like Animate.css

为转换定义 css

文档中的示例 css：

.slide-fade-enter-active {
   transition: all .3s ease;
}
.slide-fade-leave-active {
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
   transform: translateX(10px);
   opacity: 0;
}

Answer 2

您可以使用 Vuejs transition 要更改组件而不是 vuetify 转换，请查看以下示例：

<transition name="slide-in-down" appear appear-active-class="animated slideInDown">
    <div> element you are apply the transition to</div>
</transition>

Answer 3

如果有人需要知道如何使用 VuetifyJS 转换 router-view :

<v-main>
  <v-container fill-height>
    <v-slide-x-transition mode="out-in">
      <router-view />
    </v-slide-x-transition>
  </v-container>
</v-main>

如何验证页面转换？

How to vuetify page transition?

javascript

animation

styles

transitions

vue.js