如何vuetify页面过渡

Question

我有一个带有Vuetify的Spa Vue页面，当我在Aplication的组件之间更改时，我希望组件以过渡显示。我尝试使用 <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本身使用以下格式支持过渡。

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

Answer 2

如果有人需要知道如何使用 router-view的vuetifyjs transition，我通过页面过渡理解。

vuetify router-view transition

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中，不幸的是，由于路由器视图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 3

您可以使用 vuejs 过渡用于更改组件而不是Vuetify Transitions，请查看以下示例：

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