<template>
  <section class="app-main">
    <transition :name="transitionName" mode="out-in">
	  <router-view/>
    </transition>
  </section>
</template>

<script>
export default {
	name: "AppMain",
	computed: {
	},
	data(){
		return {
			transitionName: 'slide-right'
		}
	},
	watch: {
		'$route' :{
			handler(to, from) {
				let isBack = this.$router.isBack 
				if(isBack) {
					this.transitionName = 'slide-right'
				} else {
					this.transitionName = 'slide-left'
				}
				this.$router.isBack = false
			},
			deep: true
		}
　  }
};
</script>

<style scoped>
.app-main {
	flex-grow: 1;
	width: 100%;
}

.Router {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all .2s ease;
}

.slide-left-enter,
 .slide-right-leave-active {
     opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}
</style>
<style lang="scss">

</style>