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


Posted in Javascript onNovember 14, 2017

写在前面

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

本文结构

1.效果演示

2.使用方法介绍

3.关键步骤讲解

正文

1.效果演示

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

pic_1

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

pic2

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

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

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

demo

3.关键步骤讲解

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

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

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

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

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

位置解释

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

关键代码:

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

计算每个item的夹角

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

位置解释

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

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

生成展开和收缩的keyframe

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

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

item消失的keyframe

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

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进行关闭.

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

code

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

code

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

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

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

pic_6

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

关键代码

至此所有步骤讲解完毕

总结

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

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
各种常用的JS函数整理
Oct 25 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Node之简单的前后端交互(实例讲解)
Nov 14 #Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 #Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 #Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 #Javascript
js实现数组内数据的上移和下移的实例
Nov 14 #Javascript
vue router使用query和params传参的使用和区别
Nov 13 #Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 #Javascript
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP7 新增功能
2021/03/09 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python的launcher用法知识点总结
2020/08/07 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
财务管理个人自荐书范文
2013/11/24 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
公司委托书范本5篇
2014/09/20 职场文书
会计工作检讨书
2015/02/19 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
被告代理词范文
2015/05/25 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Golang 链表的学习和使用
2022/04/19 Golang