Vue Transition实现类原生组件跳转过渡动画的示例


Posted in Javascript onAugust 19, 2017

最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记

官方文档:https://cn.vuejs.org/v2/guide/transitions.html

演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式)

前言

看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来。可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置。

原理

模版中使用了Vue提供的封装组件 transition,配合CSS类名在 enter/leave 的六种不同的状态过渡中切换。

Vue Transition实现类原生组件跳转过渡动画的示例

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用 <transition name="my-transition"> 可以重置前缀,比如 v-enter 替换为 my-transition-enter

重写跳转函数

// 根据具体的跳转类型更改跳转属性值,执行不同的动画
const nextDirection = (direction) => {
 let el = document.getElementById('app')
 if (el) el.setAttribute('transition-direction', direction)
}

router['_push'] = router['push']

// 重写路由跳转方法,设置跳转类型后跳转
router.forward = router['push'] = (target) => {
 nextDirection('forward')
 setTimeout(() => { router['_push'](target) })
}

// 重写路由返回方法,设置跳转类型后跳转到上一页
router.back = (target) => {
 nextDirection('back')
 if (target) {
 setTimeout(() => { router['_push'](target) })
 }
 history.go(-1)
}

How to use

# init template
vue init CoderLQChou/v-transition-template my-transition-app

# cd project
cd my-transition-app

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

仓库地址:https://github.com/CoderLQChou/vue-transition-template

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

Javascript 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
Vue自定义事件(详解)
Aug 19 #Javascript
Vue内容分发slot(全面解析)
Aug 19 #Javascript
简单的网页广告特效实例
Aug 19 #Javascript
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
20个PHP常用类库小结
2011/09/11 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php自定义apk安装包实例
2014/10/20 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
原生js实现放大镜
2017/02/20 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
JavaScript表单验证完美代码
2017/03/02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
报关专员求职信范文
2014/02/22 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
学术诚信承诺书
2014/05/26 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
自我检讨书范文
2015/01/28 职场文书
单位租车协议书
2015/01/29 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis