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

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

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
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。