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 创建运动框架的实现代码
May 08 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
JavaScript中的高级函数
Jan 04 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
react antd实现动态增减表单
Jun 03 Javascript
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学习之字符串比较和查找
2011/04/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
php 修改密码实现代码
2017/05/24 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python3实现磁盘空间监控
2018/06/21 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
医学专业毕业生求职信
2014/06/20 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2016教师节问候语
2015/11/10 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript