<template>
  <div id="app" style="height:100%;">
    <transition :name="viewTransition" :css="!!direction">
      <navigation>
        <router-view class="router-view"></router-view>
      </navigation>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState({
      route: state => state.route,
      direction: state => state.navigator.direction
    }),
    viewTransition() {
      if (!this.direction) return '';
      return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out');
    }
  }
};
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vue-xmobile/src/style/index.less';

html {
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
  height: 100%;
  background-color: #f3f3f3;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.router-view {
  height: 100%;
  width: 100%;
}

.weui-cells.vux-no-group-title {
  margin-top: 10px;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 350ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
