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 相关文章推荐
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
JavaScript实现点击出现子菜单效果
Feb 08 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文件的自动运行方法分析
2016/05/13 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
json数据格式常见操作示例
2019/06/13 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python命令行解析模块详解
2018/02/01 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python 图片去噪的方法示例
2019/07/09 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python如何实现远程方法调用
2020/08/07 Python
Python使用xpath实现图片爬取
2020/09/16 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
债务授权委托书范本
2014/10/17 职场文书
电影圆明园观后感
2015/06/03 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫