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.定义转换的css，或者您可以使用Animate.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来更改组件而不是更改过渡，请看以下示例：

const formatDate = date => {

  let regX = /(\d+)\/(\d+)\/(\d+)/ // AAAA-MM-DD
  
  return date.replace(regX, '$2/$3/$1')

}

如何改变页面转换？

3 个答案: