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

桃扇骨 2021-09-29 15:02 409阅读 0赞

**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>
    
    <style>
    .Router { 
      font-family: Roboto, Lato, sans-serif;
      position: absolute;
      width: 100%;
      height: 100%;
      padding-bottom: 60px;
      transition: all .377s ease;
      box-sizing: border-box;
      overflow: auto;
    }
    .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);
    }
    .ovf { 
      overflow: hidden;
    }
    .center { 
      width: 95%;
      margin: 0 auto;
      overflow-y: hidden;
    }
    li { 
      list-style: none;
    }
    </style>

**路由配置**

{ 
          path: '/playListDetail/:id',
          name: 'playListDetail',
          component: pather => require(['../components/playListDetail.vue'], pather),
          meta: { 
            title: '歌单详情',
            keepAlive: true,
            isBack: false
          }
        },

**返回事件**

back () { 
          this.$router.go(-1)
          this.$router.isBack = true
        }