如何验证页面转换？

Question

我有一个带有 vuetify 的 spa vue 页面，当我在应用程序的组件之间进行更改时，我希望该组件显示一个过渡。 我尝试使用 <v-slide-y-transition> 标记和 transition="slide-y-transition 属性，但没有任何效果。以下是我尝试过的一些示例：

以“vuetify 标签”为例：

    <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. 定义转换的 css，或者您可以使用 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

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

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

Answer 3

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

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