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匿名函数的一种应用 代码封装
Jun 27 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue实现购物车小案例
Sep 27 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
PHP统计代码行数的小代码
2019/09/19 Python
wxPython实现分隔窗口
2019/11/19 Python
Python requests模块session代码实例
2020/04/14 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
五年级小学生评语
2014/12/26 职场文书