vue的router-view如何做切换时判断设备安卓or苹果使用不同的效果?

现在安卓4.4.2机型不支持transition效果,会有BUG,所以想根据安卓和ios来做不同切换效果。有建议么?

.view {
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    position:absolute;
    width: 100%;
    height: 100%;
    color:red;
}
.go-enter{
    opacity: 1;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);

}

附切换模板是这样写的判断

<template>
    <section >
        <router-view class="view"
                     :transition="effect"
                     transition-mode="out-in"
                     v-if="!showPhone()"
        ></router-view>
        <router-view class="android_view"
                     :transition="effect"
                     transition-mode="out-in"
                     v-else
        ></router-view>
    </section>
</template>

<script type="text/ecmascript-6">
    export default {
        data (){
            return {
                effect:'go'
            }
        },
        methods:{
           showPhone(){
               var u = navigator.userAgent;
               if (u.indexOf('android') > -1){
                   return true
               }else{
                   return false
               }
           }
        }
//        route:{
//            data(){
//                this.showPhone();
//            }
//        }
    }
</script>
阅读 6k
1 个回答
v-bind:class="{ 'class-a': isA, 'class-b': isB }"
data: {
  isA: true,
  isB: false
}

这种不能直接在router-view里面用吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题