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 事件参考手册
Dec 24 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jQuery bind事件使用详解
May 05 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
区分vue-router的hash和history模式
Oct 03 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
php SQL之where语句生成器
2009/03/24 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python OpenCV实现视频分帧
2019/06/01 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
实习单位接收函模板
2014/01/10 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
水浒传读书笔记
2015/06/25 职场文书
运动会致辞稿
2015/07/29 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
班级班风口号大全
2015/12/25 职场文书
公开致歉信
2019/06/24 职场文书