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 相关文章推荐
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
深入理解python对json的操作总结
2017/01/05 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
浅谈django orm 优化
2018/08/18 Python
python3.4中清屏的处理方法
2020/07/06 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
财务工作检讨书
2014/10/29 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL