Vue Transition实现类原生组件跳转过渡动画的示例
更新时间：2017年08月19日 18:07:44 作者：啊哈丶
本篇文章主要介绍了Vue Transition实现类原生组件跳转过渡动画的示例，具有一定的参考价值，有兴趣的可以了解一下
最近学习了Vue Transition的用法，感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记
官方文档：https://cn.vuejs.org/v2/guide/transitions.html
演示地址：http://www.coderlife.com (请在移动端查看，PC端查看请打开移动端调试模式)
前言
看了挺多Vue的UI框架都不带过渡动画，今天心血来潮，就把自己平时用的动效抽离出来。可直接通过脚手架init模版配合其他UI框架使用，不需要另外进行配置。
原理
模版中使用了Vue提供的封装组件 transition，配合CSS类名在 enter/leave 的六种不同的状态过渡中切换。
对于这些在 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家分享了Vue.js第一天的学习笔记，包括数据的双向绑定、常用指令学习,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了Vue代理请求数据出现404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
element ui时间日期选择器el-date-picker报错Prop being mutated:"
在日常开发中,我们会遇到一些情况,限制日期的范围的选择,下面这篇文章主要给大家介绍了关于element ui时间日期选择器el-date-picker报错Prop being mutated: "placement"的解决方式,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue实践---vue不依赖外部资源实现简单多语操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
众所周知，一个项目在开发、测试与生产环境的各种配置变量是不一样的，但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹，这导致刚入手的小伙伴不知道在哪儿配置环境变量，不过官方也提供了相应的配置方法，本文就来介绍一下2021-08-08
element表格翻页第2页从1开始编号(后端从0开始分页)
这篇文章主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue2022-07-07
最新评论