javascript - 如何验证页面转换？

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;
}