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

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

app.vue

  1. <template>
  2.   <div id="app">
  3.     <transition :name="transitionName">
  4.       <keep-alive >
  5.         <router-view v-if="$route.meta.keepAlive" class="Router"></router-view>
  6.       </keep-alive>
  7.     </transition >
  8.     <transition :name="transitionName">
  9.       <router-view v-if="!$route.meta.keepAlive"  class="Router"></router-view>
  10.     </transition >
  11.     <Play></Play>
  12.   </div>
  13. </template>
  14. <script>import Play from './components/play'
  15. export default { 
  16.   name: 'App',
  17.   data () { 
  18.     return { 
  19.       transitionName: 'slide-left'
  20.     }
  21.   },
  22.   watch: { 
  23.     '$route' (to, from) { 
  24.       // 切换动画
  25.       let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
  26.       if (isBack === true) { 
  27.         this.transitionName = 'slide-right'
  28.         // from.meta.keepAlive = false
  29.         // to.meta.keepAlive = true
  30.       } else { 
  31.         // from.meta.keepAlive = true
  32.         // to.meta.keepAlive = false
  33.         // this.transitionName = 'slide-left'
  34.         if (this.$route.path.split('/').length < 3) { 
  35.           this.transitionName = 'slide-fade'
  36.         } else { 
  37.           this.transitionName = 'slide-left'
  38.         }
  39.       }
  40.       this.$router.isBack = false
  41.     }
  42.   },
  43.   components: { 
  44.     Play
  45.   }
  46. }
  47. </script>
  49. <style>
  50. .Router { 
  51.   font-family: Roboto, Lato, sans-serif;
  52.   position: absolute;
  53.   width: 100%;
  54.   height: 100%;
  55.   padding-bottom: 60px;
  56.   transition: all .377s ease;
  57.   box-sizing: border-box;
  58.   overflow: auto;
  59. }
  60. .slide-left-enter,
  61. .slide-right-leave-active { 
  62.   opacity: 0;
  63.   -webkit-transform: translate(100%, 0);
  64.   transform: translate(100%, 0);
  65. }
  67. .slide-left-leave-active,
  68. .slide-right-enter { 
  69.   opacity: 0;
  70.   -webkit-transform: translate(-100%, 0);
  71.   transform: translate(-100% 0);
  72. }
  73. .ovf { 
  74.   overflow: hidden;
  75. }
  76. .center { 
  77.   width: 95%;
  78.   margin: 0 auto;
  79.   overflow-y: hidden;
  80. }
  81. li { 
  82.   list-style: none;
  83. }
  84. </style>

路由配置

  1. { 
  2.       path: '/playListDetail/:id',
  3.       name: 'playListDetail',
  4.       component: pather => require(['../components/playListDetail.vue'], pather),
  5.       meta: { 
  6.         title: '歌单详情',
  7.         keepAlive: true,
  8.         isBack: false
  9.       }
  10.     },

返回事件

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

发表评论

表情：
评论列表 （有 0 条评论，466人围观）

还没有评论，来说两句吧...

相关阅读

    相关 移动端滑动

    前言 移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。 小插件

    以你之姓@以你之姓@/ 0 赞/ 411 阅读