如何证明页面过渡？

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

如果有人需要知道如何使用router-view我通过页面转换理解的 VuetifyJS 转换。

Vuetifyrouter-view过渡

Vue2 / Vuetify2

在这里您可以直接使用 Vuetify 过渡

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

Vue3 / Vuetify3

遗憾的是，在 Vue3 / Vuetify3 中，由于 router-view API 的更改，这不再可以直接使用。当然，您可以在 Github 上选择 Vuetify 过渡的值并相应地重新创建它们。

<template>
  <v-main>
    <v-container fill-height>
        <router-view v-slot="{ Component, route }">
          <transition name="slide-x" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
    </v-container>
  </v-main>
</template>

<style>
    /* v-slide-x-transition look a like */
    .slide-x-enter-active,
    .slide-x-leave-active {
      transition: transform .6s cubic-bezier(0.25, 0.8, 0.5, 1), opacity .8s;
      opacity: 1;
    }

    .slide-x-enter-from,
    .slide-x-leave-to {
      opacity: 0;
    }

    .slide-x-enter-from {
      transform: translateX(100px);
    }

    .slide-x-leave-to {
      transform: translateX(-100px);
    }
</style>

Answer 2

您拥有的Vuetify过渡仅适用于Vuetify库组件。例如<v-menu transition="slide-x-transition"> ，v-menu组件之一在哪里。您不能在简单的上以这种方式使用过渡<div>。

然而，Vue.js本身支持过渡使用以下格式。

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

您将必须根据此处的文档为过渡定义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;
 }