抽屉似弹层，页面跳转右侧滑入左侧滑出过渡效果，在ios上用户不通过点击顶部自带返回，而是侧滑手机返回时过渡效果出现两次效果很不友好！

页面跳转过渡效果解决方案

vuex

isIosMoveBack: false, // 判断过度动画取消的时机

过渡页

<template>
    <div>
        <transition :name="transitionName">
            <router-view class="child-view"></router-view>
        </transition>
    </div>
</template>
<script>
export default {
    data () {
        return {
            transitionName: 'slide-left' // 活动动画
        }
    },
    computed: {
    	// 返回是否过度取消机制状态
        isIosMoveBack() { return this.$store.getters.getIsIosMoveBack },
    },
	mounted() {
		// 判断机型（IOS时返回true)
		if (this.isIOS()){
		    // 监听到滑动事件时设为true
		    document.body.addEventListener('touchmove', () => {
		    	// vuex 存储的状态
		        this.$store.commit('setIsIosMoveBack', true)
		    }, false)
		}
	},
	methods: {
	    // 是否ios
	    isIOS(){
	        var u = navigator.userAgent; //获取到的是个字符串，包括很多信息，我只匹配我想要的信息
	        return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是苹果手机
	    },
	},
	// 在当前路由改变，但是该组件被复用时调用
	beforeRouteUpdate (to, from, next) {
		// 路由过渡动画的监听判断
        if(this.isIosMoveBack){
        	// 清除过渡效果
            this.transitionName = ''
            // 顺便重置监听状态 
            this.$store.commit('setIsIosMoveBack', false) 
        }else{
			// 加上过渡效果
			this.transitionName = 'slide-right'
		}
	}
}
</script>

页面抽屉弹层解决方案

vuex

duration: 0.3, // 动画时长

App.vue

created () {
	// 监听ios是否滑动
    window.addEventListener('touchmove', () => {
    	// 是否ios
        if(this.onWay.isIOS()){
        	// 是抽屉动画时长设为0
            this.$store.state.duration = 0
            // 滑动应该也很快1秒后再初始(能监听到滑动完就别用定时器初始)
            setTimeout(()=>{
                this.$store.state.duration = 0.3
            },1000)
        }
    }, false)
}

注意：每个有抽屉弹层页面（以vant弹层示范）

<van-popup position="right" :duration="duration" :overlay="false">
</van-popup>

computed:{
	// 动态拿到vuex动画时长
   	duration(){ return this.$store.state.duration }
},	

有更好解决方案的朋友都在评论区说说吧