基于 Vue 实现一个酷炫的 menu插件

写在前面

最近看到一个非常酷炫的menu插件，一直想把它鼓捣成vue形式，谁让我是vue的死灰粉呢，如果这都不算爱:pensive:。:laughing:开个小玩耍，我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识.

本文结构

1.效果演示

2.使用方法介绍

3.关键步骤讲解

正文

1.效果演示

pic_1

pic2

pic_3

在线演示 live demo

2.使用介绍

项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone项目到本地

a. 首先在单文件组件里引入menu组件，导入common文件夹stylus里的menuConfig.stylus.

b.配置相应的参数

可选参数

* radius：default为100px,item距离menu的button的距离。

* startAngle:defaut为0，item开始的角度，以时钟3点钟方向记为0，然后顺时针方向为递增方向。

* endAngle:default为315，最后一个item的角度。

* itemNum:default为8

* animationDuration:default为0.5s，每个item动画的执行时间

* itemAnimationDelay:default为0.04s,每个item之间animation触发的间隔延迟时间

必选参数

* iconImgArr

import您需要的icon,然后生成iconImgArr（computed属性绑定），作为props传给menu组件

menu的位置

目前有center,corner两种位置，在menu的class里指定。center的class:.menu-center-wrapper

corner的class:.menu-left-corner-wrapper。当然自己指定位置也是ok的。

一个简单的example

demo

3.关键步骤讲解

整个menu的实现关键在于计算menu展开后最后的坐标，以及展开与收缩的动画.（由于整个项目布局比较简单，所以这里主要讲解逻辑和动画的实现）

第一步：计算menu展开后横坐标和纵坐标

下面的x,y分别表示item在页面的位置,以x为例。

x：原始的位置，x2最后展开的位置，x1中间的过渡位置(主要是造成一个“拉回”的效果)，以下是图片解释,为了解释简单明了，我放大了radius倍数以及增加了动画的执行时间。

位置解释

位置的计算：首先计算每个item之间的夹角,起始item是沿着顺时针布局的，每个item之间的夹角等于(endAngle-startAngle)/(itemNum-1)。当前item应该旋转的角度为：angleCur=startAngle+index*每个item之间的夹角。得到item的旋转角度之后，用Math.cos和Math.sin和radius相乘得到其横坐标和纵坐标.

关键代码:

计算每个item的夹角

位置解释

第二步，根据生成的坐标使用js动态生成animtion,并插入到样式文件中。

生成展开和收缩的keyframe

到这一步我们完成了点击menu展开与收缩。

第二步，完成点击item之后item放大与消失，其他的item缩小与消失

item消失的keyframe

item消失的keyframe

这里触发动画使用 vue提供transition ，当元素的v-show为false时，也就是display为none时，触发动画。

每个item动画完成后都会触发animationEnd事件，监听item的animationEnd事件，当所有动画依次触发完毕之后，提醒menu置于关闭状态（ 父子组件通信 ）。

我在menu组件里使用v-on监听animationEnd事件，item自己的动画执行后,通过$emit触发animationEnd事件，通知menu的动画计数count++,当count达到总的项目数的时候,menu进行关闭.

code

code

再次打开menu的时候检查与item绑定的showItem是否为false,是的话置为true。点击时需要拿到被点击item的index,得到全局的currentIndex即被点击的item的index。被点中的使用放大动画，否则使用缩小动画。

pic_6

关键代码

至此所有步骤讲解完毕

总结

以上所述是小编给大家介绍的基于 Vue 实现一个酷炫的 menu插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • imageVue相册Sitemenu插件使用方法及注意事项

    Sitemenu插件可以给你的imageVue相册添加一个flash的导航菜单(具体效果可以看我的相册顶部).这样imageVue在与其他程序配合使用的时候更加方便.下面说一下Sitemenu插件的安装方法和注意事项. 安装方法:1.下载文件(去http://bbs.pjhome.net/viewthread.php?tid=9356的5楼下载或在google上搜索"Sitemenu Module for ImageVue").2.解压缩下载的文件,并上传新的imageVue.swf和

  • vue2.0的contextmenu右键弹出菜单的实例代码

    整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>

  • vue2+el-menu实现路由跳转及当前项的设置方法实例

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 好了,下面通过本文给大家介绍vue2+el-menu实现路由跳转及当前项的设置方法,具体内容如下所示: <span style="

  • 基于 Vue 实现一个酷炫的 menu插件

    基于 Vue 实现一个酷炫的 menu插件

    写在前面 最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱:pensive:.:laughing:开个小玩耍,我们一起来探索黑魔法吧.观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示 pic_1 pic2 pic_3 在线演示 live demo 2.使用介绍 项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone

  • 打造酷炫的AndroidStudio插件

    打造酷炫的AndroidStudio插件

    前面几篇文章学习了AndroidStudio插件的基础后,这篇文章打算开发一个酷炫一点的插件.因为会用到前面的基础,所以如果没有看前面系列文章的话,请先返回.当然,如果有基础的可以忽略之.先看看本文实现的最终效果如下(好吧,很多人说看的眼花): 虽然并没有什么实际用途,但是作为学习插件开发感觉挺有意思的. 1. 基本思路 基本思路可以归结如下几步: 1).通过Editor对象可以拿到封装代码编辑框的JComponent对象,即调用如下函数:JComponent component = edito

  • 基于vue实现一个禅道主页拖拽效果

    效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤 布局 这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe

  • 基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo

  • 利用JavaScript制作一个酷炫的3D图片演示

    利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • 基于JS实现十种酷炫的网页特效

    基于JS实现十种酷炫的网页特效

    目录 1.鼠标点击弹出爱心 2.鼠标点击弹出文字 3.鼠标点击弹出烟花波纹 4.鼠标小星星拖尾跟随 5.鼠标粒子随心拖尾跟随 6.鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果(自由组合) 7.樱花特效 8.蜘蛛网特效 9.看板娘(左下角的小人) 10.烟花 1.鼠标点击弹出爱心 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • 基于jQuery实现一个marquee无缝滚动的插件

    基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee ). 代码如下: /** * 类库名称:jQuery.marquee * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页:http://www.miaoqiyuan.cn/ * 联系邮箱:mqycn@126.com * 使用说明:http://www.mia

  • 一个酷炫的Android图表制作框架

    一个酷炫的Android图表制作框架

    一.概述 最近项目中需要制作柱形图以及折线图,所以便在网上搜索了一下这方面的开源框架,最后找到了这个酷炫的框架,不仅支持各种各样的图形制作,包括折线图.柱形图.饼状图等,而且提供了丰富的API接口,等着你去自定义,只要花点心思便能 DIY 出你心仪的图表类型,使用起来也是相当的简单. 从效果图可以看到,这个框架是相当酷炫的啊,在这里附上该框架的github地址hellocharts-android,有兴趣的不妨去 star 一下 二.炫酷的柱形图 可以看到柱形图也是能玩出花样来的,绚丽的色彩,自

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • 基于vue写一个全局Message组件的实现

    不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件.this.$message(),this.Toast()等,用起来很爽.他们不像其他的组件,需要去导入,去注册.麻烦的很. 看了Element的源码,自己也撸了一个.其中包括了以前没有接触过的插件知识,哎,感觉自己对Vue的理解还是不够,只停留在了使用的这阶段.需要更多的往深层次的地方去钻.不说废话了,直接上代码. 效果演示 全局组件需要一个index.js文件去注册 BlogMessage.vue 这里的scr

随机推荐