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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
语义化 H1 标签
Jan 14 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
js实现日历的简单算法
Jan 24 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python设置中文界面实例方法
2020/10/27 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
出国导师推荐信
2014/01/16 职场文书
小学班主任评语大全
2014/04/23 职场文书
个人求职信范文
2014/05/24 职场文书
公务员培的训心得体会
2014/09/01 职场文书
单位租房协议书样本
2014/10/30 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery