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 入门实例1
Jun 25 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
vue离开当前页面触发的函数代码
Sep 01 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
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
对python 操作solr索引数据的实例详解
2018/12/07 Python
python中比较两个列表的实例方法
2019/07/04 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
电气技术员岗位职责
2013/11/19 职场文书
服装店营销方案
2014/03/10 职场文书
一分钟演讲稿
2014/04/30 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers