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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
如何封装Vue Element的table表格组件
Feb 06 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
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
浅谈js闭包理解
2019/04/01 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python分析学校四六级过关情况
2017/11/22 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
什么是Python中的匿名函数
2020/06/02 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年施工员工作总结
2014/11/18 职场文书
七一晚会主持词
2015/06/29 职场文书
校友会致辞
2015/07/30 职场文书
三好学生竞选稿
2015/11/21 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL