用 Vue 做一个酷炫的 menu

时间:2017-12-06 08:26:39 来源:
默认
特大
宋体
黑体
雅黑
楷体

原题目:用 Vue 做一个酷炫的 menu

来自:MingSengW 的博客

https://my.oschina.net/u/3727086/blog/1573075

写在前面

最近看到一个十分酷炫的menu插件,【关注】揭秘体彩开奖背地那些事儿,有视频有图锁定本相,始终想把它鼓捣成vue情势,谁让我是vue的逝世灰粉呢,假如这都不算爱??。??开个小玩笑,我们一起来摸索黑魔法吧。观看本教程的读者需要具备必定的vue和css3的常识。

本文构造

1.效果演示

2.使用方式先容

3.要害步骤讲授

注释

1.后果演示

pic_1

pic2

pic_3

在线演示:https://mingsengw.github.io/vuebloommenu/

2,苹果官方换新机.使用介绍

项目地址:github.com/MingSengW/vuebloommenu,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:.menucenterwrapper corner的class:.menuleftcornerwrapper。当然自己指定位置也是ok的。 一个简单的example

demo

3.关键步骤讲解

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

第一步:计算menu展开后横坐标和纵坐标。下面的x,y分辨表现item在页面的位置,以x为例。 x:原始的位置 x2最后展开的位置 x1旁边的过渡位置(主要是造成一个“拉回”的效果)

以下是图片说明,为懂得释简略明了,我放大了radius倍数以及增添了动画的执行时光。

地位解释

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

症结代码:

盘算每个item的夹角

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

天生开展跟压缩的keyframe

到这一步咱们实现了点击menu展开与收缩。

第三步,完成点击item之后item放大与消失,其余的item缩小与消逝

item消散的keyframe

这里触动员画使用vue供给transition ,当元素的vshow为false时,如何疾速销售商品的技能,也就是display为none时,触发动画。

每个item动画完成后都会触发animationEnd事件,监听item的animationEnd事件,当所有动画顺次触发结束之后,提示menu置于关闭状况(父子组件通讯 )。

我在menu组件里应用von监听animationEnd事件,item本人的动画履行后,通过$emit触发animationEnd事件,告诉menu的动画计数count++,当count到达总的名目数的时候,menu进行封闭.

code

code

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

pic_6

关键代码

至此所有步骤讲解完毕

●本文编号555,当前想浏览这篇文章直接输入555即可

Copyright 2012-2018 www.ctv0123.com 版权所有 关于我们 | 广告服务 | 诚聘英才 | 联系我们 | 友情链接 | 免责申明
友情链接:幸运飞艇定位胆玩法  幸运飞艇玩法介绍  幸运飞艇玩法攻略  幸运飞艇改单  幸运飞艇玩法攻略  

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!