javascript 如何 vuetify 页面转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48661168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vuetify page transition?
提问by Perropolesia
I have a spa vue page with vuetify, and when I change between the components of the aplication I want the component shows with a transition.
I tried with the <v-slide-y-transition>tag and the transition="slide-y-transitionattribute but nothing works. Here some examples of what I tried:
我有一个带有 vuetify 的 spa vue 页面，当我在应用程序的组件之间切换时，我希望组件显示过渡。我尝试使用<v-slide-y-transition>标签和transition="slide-y-transition属性，但没有任何效果。这里有一些我尝试过的例子：
Example with the "vuetify tag":
“vuetify 标签”示例：
<template>
<v-app>
<v-slide-y-transition>
<h1>Test</h1>
</v-slide-y-transition>
</v-app>
</template>
Example with the attribute:
带有属性的示例：
<template>
<v-app>
<div transition="slide-y-transition">
<h1>Test</h1>
</div>
</v-app>
</template>
回答by skribe
The Vuetify transitions as you have them only work on the Vuetify library components. e.g.<v-menu transition="slide-x-transition">where v-menuis one of the components. You can't use the transitions that way on a simple <div>.
您拥有的 Vuetify 转换仅适用于 Vuetify 库组件。例如<v-menu transition="slide-x-transition">wherev-menu是组件之一。您不能在简单的<div>.
However, Vue.js itself supports transitionsusing the following format.
然而，Vue.js本身支持过渡使用以下格式。
<transition name="slide">
<div> element you are apply the transition to</div>
</transition>
You will have to define the css for the transition as per the documentation here.or you can use a css library like Animate.css
您必须根据此处的文档定义过渡的 css 。或者你可以使用像Animate.css这样的 css 库
Example css from documentation:
文档中的示例 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;
}
回答by Kosrat D. Ahmad
You can use VuejstransitionFor changing components instead of vuetify transitions look at the following example:
你可以使用Vuejs transition 来改变组件而不是 vuetify transitions 看下面的例子：
<transition name="slide-in-down" appear appear-active-class="animated slideInDown">
<div> element you are apply the transition to</div>
</transition>
