页面动画的处理 v1.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
    }
}

小于

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

const router = new Router({
    APP:{
        animation:{
            animationType:'pop-in',
            animationDuration:300
        }
    }, 
    routes:[
        // ....
    ]
});

小于

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

const router = new Router({
    routes:[
       path: '/pages/login/login',
       animation:{
            animationType:'pop-in',
            animationDuration:300
        }
    ]
});

小于

跳转API传递的动画

this.$Router.push({
    name:'router5',
    animation:{
        animationType:'slide-in-top',
        animationDuration:500
    }
})

注意

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

支持的动画及API

目前仅支持 push

下面列出显示动画与关闭动画，及对应规则：