这篇文章将为大家详细讲解有关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 }
关于vue移动端实现手机左右滑动入场动画的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。