（六）vue开发 - transition之页面切换过渡动画

h5页面在内嵌在app里使用，页面切换时体验不太友好，可以使用transition设置动画，页面前进和后退时保持和原生客户端一样的切换效果：
1、在路由里设置，meta的index的值，通过index值的大小控制页面跳转层级顺序，如下：首页 => 产品 => 详情

export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首页',
                index:1
            }
        },
        {
            path: '/list',
            name: 'list',
            component: list,
            meta:{
                title:'产品',
                index:2
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: detail,
            meta:{
                title:'详情',
                index:3
            }
        }]
})

2.在app.vue文件里加上transition动画效果

<template>
    <div id="app" :class="[isIos ? 'xn-ios':'']">
        <transition :name="transitionName">
            <keep-alive><router-view /></keep-alive>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data(){
            return {
                isIos:false,
                transitionName:''
            }
        },
        create(){
        },
        mounted(){
            this.getDevice();

        },
        methods: {
            getDevice(){
                if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                    this.isIos = true;
                }
            }
        },
        watch: {//使用watch 监听$router的变化
            $route(to, from) {
                //如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
                if(to.meta.index > 0){
                    if( to.meta.index < from.meta.index){
                        this.transitionName = 'slide-right';
                    }else{
                        this.transitionName = 'slide-left';
                    }
                }else if(to.meta.index == 0 && from.meta.index > 0){
                    this.transitionName = 'slide-right';
                }

                //当然，如果你没有需要设置索引值为0的页面可以直接用着一段
                /*if( to.meta.index < from.meta.index){
                      this.transitionName = 'slide-right';
                }else{
                      this.transitionName = 'slide-left';
                }*/
            }
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
        font-family: arial;
        color: #333;
        -webkit-user-select: none;
    }

    html {
        font-family: arail;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        line-height: 1;
        font-size: 20px;
        height:100%;
        overflow-x: hidden;
    }
    body{
        position: relative;
        overflow-x: hidden;
        background: #f0f2f5;
        min-height:100%;
        display: flex;
        flex-direction: column;
    }
    #app{
        display: flex;
        flex:1;
        flex-direction: column;
        background: #f0f2f5;
    }
    img {
        display: block;
    }
    ul,ol{
        list-style: none;
    }
    a{
        text-decoration: none;
        outline: none;
    }
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all .3s;
        position: absolute;
        width:100%;
        left:0;
    }
    .slide-right-enter {
        transform: translateX(-100%);
    }
    .slide-right-leave-active {
        transform: translateX(100%);
    }
    .slide-left-enter {
        transform: translateX(100%);
    }
    .slide-left-leave-active {
        transform: translateX(-100%);
    }
</style>

说明：我项目里有的页面，是一个单独的页面，并不是从某个H5路由跳过来，也不需要跳转到其他H5页面上去，这样的页面不需要动画，因为我的app里，webview打开H5页面时就已经具备动画效果了，所以，我把app打开的第一个H5的index都设置为0，后面这个页面如果要跳到其他页面，只需要将其他页面的index值设置为大于0就好了