# 页面动画的处理 v1.4.8+

我们可以通过不同地方的配置来达到不同的权重值。请看!!

pages.json < APP.animation < route.animation < animation
1

翻译一下这个啥意思哈:pages.json下配置的 app-plus 节点下设置的全局动画小于在实例化对象传递的 animation,再小于在实例化路由时路由表中的 animation,最后小于路由api跳转时传递的 animation

# 代码解释:

pages.json 中配置的是窗口显示的动画

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}
1
2
3
4
5
6

# 小于

实例化时APP字段传递的动画



 
 
 
 






const router = new Router({
    APP:{
        animation:{
            animationType:'pop-in',
            animationDuration:300
        }
    }, 
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8
9
10
11

# 小于

实例化时路由表传递的动画




 
 
 
 



const router = new Router({
    routes:[
       path: '/pages/login/login',
       animation:{
            animationType:'pop-in',
            animationDuration:300
        }
    ]
});
1
2
3
4
5
6
7
8
9

# 小于

跳转API传递的动画



 
 
 
 


this.$Router.push({
    name:'router5',
    animation:{
        animationType:'slide-in-top',
        animationDuration:500
    }
})
1
2
3
4
5
6
7

注意

每次路由守卫下to都会带上当前跳转页面的动画字段,from则没有!

# 支持的动画及API

目前仅支持 push

# 下面列出显示动画与关闭动画,及对应规则:

显示动画 关闭动画 显示动画描述(关闭动画与之相反)
slide-in-right slide-out-right 新窗体从右侧进入
slide-in-left slide-out-left 新窗体从左侧进入
slide-in-top slide-out-top 新窗体从顶部进入
slide-in-bottom slide-out-bottom 新窗体从底部进入
pop-in pop-out 新窗体从左侧进入,且老窗体被挤压而出
fade-in fade-out 新窗体从透明到不透明逐渐显示
zoom-out zoom-in 新窗体从小到大缩放显示
zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
none none 无动画