# 页面动画的处理 V 1.4.8+

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

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

翻译一下这个啥意思哈：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	无动画

← 原生tabbar的拦截页面返回事件 →