开发者社区> mszhangxuefei> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

vue页面切换效果(slide效果切换)

简介: 最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition,最终将实现的核心代码贴出来。这里实现的是上下切换,左右的效果类似。
+关注继续查看

 最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition,最终将实现的核心代码贴出来。这里实现的是上下切换,左右的效果类似。

核心代码如下(App.vue):

注:这里使用了vue-touch组件来监听swipe事件

最重要的就是transition的样式:

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue.js快速上手
什么是Vue.js   Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。
1184 0
Vue.js 入门
背景 为了学习spring,准备写一个通讯录demo,实现增删改查功能。 前端页面同事推荐用vue.js,因为简单快速,当然前提是基于你对前端的html,css,js有一定的了解   资料   vue.
907 0
vue.js条件渲染
因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素
1727 0
vue.js列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名
2443 0
vue.js 视频播放
最近心学习vue.js开发,video开发播放! 使用第三方的封装:https://www.npmjs.com/package/vue-video-player; 1. npm install vue-video --save 安装播放第三方插件; 2.
3181 0
Vue.js之父子组件
DOCTYPE html> var Child = Vue.extend({ template: ' This is child component' }) var myComponent = Vue.
775 0
+关注
mszhangxuefei
姓名:张雪飞|2014-至今:从事前端相关开发工作,曾做过3年的asp.net mvc开发,潜心在大前端领域深入学习(node,vue,webpack,es6)个人技术博客:http://zhangxuefei.site
75
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载