• 欢迎光临~

vue移动端 实现手机左右滑动入场动画

开发技术 开发技术 2022-06-01 次浏览

app.vue

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive >
        <router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
      </keep-alive>
    </transition >
    <transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive"  class="Router"></router-view>
    </transition >
    <Play></Play>
  </div>
</template>
<script>import Play from './components/play'
export default {
  name: 'App',
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route' (to, from) {
      // 切换动画
      let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack === true) {
        this.transitionName = 'slide-right'
        // from.meta.keepAlive = false
        // to.meta.keepAlive = true
      } else {
        // from.meta.keepAlive = true
        // to.meta.keepAlive = false
        // this.transitionName = 'slide-left'
        if (this.$route.path.split('/').length < 3) {
          this.transitionName = 'slide-fade'
        } else {
          this.transitionName = 'slide-left'
        }
      }
      this.$router.isBack = false
    }
  },
  components: {
    Play
     }
}
</script>

 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119353623

程序员灯塔
转载请注明原文链接:vue移动端 实现手机左右滑动入场动画
喜欢 (0)