Vue 页面切换效果之 BubbleTransition(推荐)


Posted in Javascript onApril 08, 2018

Vue 页面切换效果之 BubbleTransition(推荐) 

CodePen 地址

前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏。因为所有资源都需要重新加载。

今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的。

步骤

  1. 点击菜单,生成 Bubble,开始执行入场动画
  2. 页面跳转
  3. 执行退场动画

函数式调用组件

我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件。我通常会用新的 Vue 根节点来实现,让效果独立于业务组件之外。

let instance = null
function createServices (Comp) {
 // ...
 return new Vue({
 // ...
 }).$children[0]
}
function getInstance () {
 instance = instance || createServices(BubbleTransitionComponent)
 return instance
}
const BubbleTransition = {
 scaleIn: () => {
 return getInstance().animate('scaleIn')
 },
 fadeOut: () => {
 return getInstance().animate('fadeOut')
 }
}

接着实现 BubbleTransitionComponent,那么 BubbleTransition.scaleIn, BubbleTransition.scaleOut 就能正常工作了。 animejs 可以监听的动画执行结束的事件。anime().finished 获得 Promise 对象。

<template>
 <div class="transition-bubble">
 <span v-show="animating" class="bubble" id="bubble">
 </span>
 </div>
</template>
<script>
import anime from 'animejs'
export default {
 name: 'transition-bubble',
 data () {
 return {
  animating: false,
  animeObjs: []
 }
 },
 methods: {
 scaleIn (selector = '#bubble', {duration = 800, easing = 'linear'} = {}) {
  // this.animeObjs.push(anime().finished)
 },
 fadeOut (selector = '#bubble', {duration = 300, easing = 'linear'} = {}) {
  // ...
 },
 resetAnimeObjs () {
  this.animeObjs.reset()
  this.animeObjs = []
 },
 animate (action, thenReset) {
  return this[action]().then(() => {
  this.resetAnimeObjs()
  })
 }
 }
}

最初的想法是,在 router config 里面给特定路由 meta 添加标记,beforeEach 的时候判断判断该标记执行动画。但是这种做法不够灵活,改成通过 Hash 来标记,结合 Vue-router,切换时重置 hash。

<router-link class="router-link" to="/#__bubble__transition__">Home</router-link>
const BUBBLE_TRANSITION_IDENTIFIER = '__bubble__transition__'
router.beforeEach((to, from, next) => {
 if (to.hash.indexOf(BUBBLE_TRANSITION_IDENTIFIER) > 0) {
 const redirectTo = Object.assign({}, to)
 redirectTo.hash = ''
 BubbleTransition.scaleIn()
  .then(() => next(redirectTo))
 } else {
 next()
 }
})
router.afterEach((to, from) => {
 BubbleTransition.fadeOut()
})

酷炫的动画能在一瞬间抓住用户的眼球,我自己也经常在逛一些网站的时候发出,wocao,太酷了!!!的感叹。可能最终的实现用不了几行代码,自己多动手实现一下,下次设计师提出不合理的动画需求时可以装逼,这种效果我分分钟能做出来,但是我认为这里不应该使用 ** 动画,不符合用户的心理预期啊。

CodePen 地址

总结

以上所述是小编给大家介绍的Vue 页面切换效果之 BubbleTransition(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript面向对象编程
Mar 18 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 #Javascript
详解vue表单——小白速看
Apr 08 #Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 #Javascript
React Router v4 入坑指南(小结)
Apr 08 #Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
You might like
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
任意位置显示html菜单
2007/02/01 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python实现Kmeans聚类算法
2020/06/10 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
妈妈的账单教学反思
2014/02/06 职场文书
员工安全责任书范本
2014/07/24 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
Java中的Kotlin 内部类原理
2022/06/16 Java/Android