这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考:
& lt; template>
& lt; div id=坝τ谩北?
& lt;过渡:name=皌ransitionName”比;
& lt; router-view类="子视图"祝辞& lt;/router-view>
& lt;/transition>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“应用程序”,
数据(){
返回{
transitionName:“slide-left”
}
}，
安装(){
}，//监听路由的路径,可以通过不同的路径去选择不同的切换效果
看:{
“美元路线”(从){
如果()。路径=='/'){
这一点。transitionName=罢呕玫破?
其他}{
这一点。transitionName=皊lide-left”;
}
}
}
}
& lt;/script>
& lt; style>
.child-view {
位置:绝对的;
左:0;
上图:0;
宽度:100%;
高度:100%;
过渡:0 cubic-bezier (55, 0, 1, 1);
}
.slide-left-enter .slide-right-leave-active {
透明度:0;
-webkit-transform:翻译(30 px, 0);
变换:翻译(30 px, 0);
}
.slide-left-leave-active .slide-right-enter {
透明度:0;
-webkit-transform:翻译(-30 px, 0);
变换:翻译(-30 px, 0);
}
& lt;/style>之前
路由api的链接在这,详细的可以去看这https://router.vuejs.org/zh-cn/advanced/transitions.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
