如何将Vue移动端左右滑动入场动画改写为长尾词？

本文共计441个文字，预计阅读时间需要2分钟。

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

+app.vue+template+div+id=app+transition+: name=transitionName+keep-alive+router-view+v-if=$route.meta.keepAlive+

修改后：Vue移动端实现手机左右滑动入场效果的整体代码如下：

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 }

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