[游戏开发]Vue转场动画(仿微信)

1. 需要动态绑定 transition的name

  <div>
  	<transition :name="transitionName">
	  <router-view></router-view>
  	</transition>
  </div>

2. 我这里通过记录路由的方式，来判断前进或后退

export default {
  data () {
    return {
      transitionName: '',
      routes: []
    }
  },
  watch: {
    '$route' (to) {
      const routes = [...this.routes]
      if (routes.length === 0) {
        // 首次进入
        to.name && routes.push(to.name)
      } else {
        if (routes.indexOf(to.name) !== -1) {
          // 存在，后退
          this.transitionName = 'slide-right'
          routes.splice(routes.indexOf(to.name) + 1, 100)
        } else {
          // 前进
          this.transitionName = 'slide-left'
          routes.push(to.name)
        }
      }
      this.routes = routes
    }
  }
}

3. CSS样式

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-active {
  transform: translateX(-20%);
  z-index: -1;
}
.slide-left-enter-active {
  z-index: 2;
}
.slide-right-enter {
  transform: translateX(-20%);
}
.slide-right-leave-active {
  transform: translateX(100%);
  z-index: 2;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  top: 0;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, .08);
  will-change: transform;
  transition: transform .35s;
}