<template lang="html">
  <div class="indexVue">

    <transition-group name="subpages">

      <start key="start" class="subpage" v-show="globalData.step === 1" :global-data="globalData" />

      <home key="home" class="subpage" v-show="globalData.step === 2" :global-data="globalData" />

    </transition-group>

  </div>
</template>

<script>
import start from './switch/start'
import home from './switch/home'

export default {
  components: {
    start,
    home
  },
  data () {
    return {
      globalData: {
        step: 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.indexVue{
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('~static/img/background.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  transform-style: preserve-3d;
  /*! autoprefixer: off */
  perspective: 800px;
  /* autoprefixer: on */
  .subpage{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
  }
}
$transitionDuring: .5s;
.subpages-enter-active{
  transition: all $transitionDuring linear $transitionDuring;
}
.subpages-leave-active {
  transition: all $transitionDuring linear;
}
.subpages-leave-to {
  // opacity: 0;
  // top: -100px!important;
  transform: rotateY(90deg)!important;
}
.subpages-enter {
  // opacity: 0;
  // top: 100px!important;
  transform: rotateY(-90deg)!important;
}
</style>
