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


Posted in Javascript onJune 17, 2020

本文实例为大家分享了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
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
ES6 Set结构的应用实例分析
Jun 26 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
JS异步处理的进化史深入讲解
Aug 25 #Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 #Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 #Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
html中select语句读取mysql表中内容
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
php实现加减法验证码代码
2014/02/14 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Python pickle模块用法实例
2015/04/14 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
详解如何设置Python环境变量?
2019/05/13 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
详解python中的index函数用法
2019/08/06 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
服务之星获奖感言
2014/01/21 职场文书
个人委托函范文
2015/01/29 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
美丽的大脚观后感
2015/06/03 职场文书