& lt; template>
& lt; div id=坝τ谩北?
& lt; Header> & lt;/Header>//用过渡把切换组件页面的容器包含
& lt;过渡name=" slide-fade比;
& lt; router-view> & lt;/router-view>
& lt;/transition>
& lt;/div>
& lt;/template>
& lt; script>
从“进口头。/组件/头”
出口默认{
名称:“应用程序”,
组件:{头},
}
& lt;/script>//动画
& lt; scoped>风格;
.slide-fade {
位置:绝对的,左:0;右:0;
}
.slide-fade-enter-active {
过渡:所有1.2年代缓解;
}
.slide-fade-leave-active {
过渡:1。cubic-bezier (2.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
左:0;右:0;
变换:translateX (50 px);
透明度:0;
}
& lt;/style>
之前
以上这篇Vue-router切换组件页面时进入进出动画方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
