当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue移动端实现手机左右滑动入场动画

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了vue移动端实现手机左右滑动入场的具体代码，供大家参考，具体内容如下

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
 }

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网