基于 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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
小程序日历控件使用方法详解
Dec 29 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
华为慧通面试题
2012/09/11 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
资产评估专业学生的自我鉴定
2013/11/14 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
班组长的岗位职责
2013/12/09 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL