vue移动端实现手机左右滑动入场动画
程序员文章站
2022-04-28 20:42:56
本文实例为大家分享了vue移动端实现手机左右滑动入场的具体代码，供大家参考，具体内容如下
app.vue
本文实例为大家分享了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
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。