文档章节

用vue做一个酷炫的menu

MingSeng-W
 MingSeng-W
发布于 2017/11/13 23:40
字数 956
阅读 6359
收藏 265
点赞 17
评论 20

写在前面

        最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的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

 

关键代码

至此所有步骤讲解完毕

© 著作权归作者所有

共有 人打赏支持
MingSeng-W
粉丝 11
博文 1
码字总数 956
作品 0
成都
程序员
加载中

评论(20)

YJ_
YJ_
:clap:
mywd
mywd
技术活当赏:smile:
WEN-01号
WEN-01号
不错不错,虽然现在还看不懂
Sindtoto
Sindtoto
支持,很萌。
MingSeng-W
MingSeng-W

引用来自“烈冰”的评论

提两点建议:1、加快动画的速度;2、弹出来的小按钮与大按钮的距离根据屏幕尺寸自适应

回复@烈冰 : 动画的速度是可以通过props配置的,谢谢您提出的屏幕自适应,写的急没考虑到
MingSeng-W
MingSeng-W

引用来自“请点赞”的评论

不错,是vue 几版本的

回复@请点赞 : 2.1.0
请点赞
请点赞
不错,是vue 几版本的
烈冰
烈冰
提两点建议:1、加快动画的速度;2、弹出来的小按钮与大按钮的距离根据屏幕尺寸自适应
EnoND
EnoND
mark
Edik
Edik
666
Vue 折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,相当人性化

前言 从开始到现在已经经历了四个月的迭代(目前RC2), 除了终端初始化的姿势,还引入了一个新的项目初始化姿势; Web端的初始化,体验了一下,效果很不错;所以记录一下. 后方多图,感兴趣的可以瞧瞧...

CRPER ⋅ 06/16 ⋅ 0

Vue + better-scroll 实现移动端字母索引导航

shortcutList 是通过计算属性得到的,取 title 的第一个字符即可。 使用 better-scroll 使用 better-scroll 实现滚动。对了,使用的时候别忘了用 import 引入。 使用 created 方法...

sinat_17775997 ⋅ 05/07 ⋅ 0

深入理解Vue的watch实现原理及其实现方式

理解Vue中Watch的实现原理和方式之前,你需要深入的理解MVVM的实现原理,如果你还不是很理解,推荐你阅读我之前的几篇文章: 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式 vue.js源码解读...

wangweianger ⋅ 05/14 ⋅ 0

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁 ⋅ 04/16 ⋅ 0

人人都能懂的Vue源码系列(二)—Vue构造函数

上篇博文中说到Vue源码的目录结构是什么样的,每个目录的作用应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象,所以我们在这个目录下去寻找Vue构造函数。果然找到了Vue构...

淼淼真人 ⋅ 05/21 ⋅ 0

解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼 ⋅ 05/08 ⋅ 0

Step-by-step,打造属于自己的 Vue SSR

编者按:本文由 玩弄心里的鬼 发表于掘金,已授权奇舞周刊转载 笔者最近在和小伙伴对vue项目进行ssr的升级,本文笔者将根据一个简单拿vue cli构建的客户端渲染的demo一步一步的教大家打造自己...

奇舞周刊 ⋅ 04/17 ⋅ 0

mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿 ⋅ 05/18 ⋅ 0

[译] Vue.js 还是 React?你会选择哪一个?为什么?

原文地址:Vue.js or React ? Which you would chose and why? 原文作者:evilpingwin 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:allenlongbaobao 校对者:Kyl...

allenWang ⋅ 06/17 ⋅ 0

[译] 怎样更好地使用 Vue:我在新工作中遇到的一些问题清单

原文地址:How not to Vue: A list of bad things I’ve found on my new job 原文作者:Anton Kosykh 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:sophiayang199...

熟鱼 ⋅ 05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim基础-编辑模式-命令模式

编辑模式:可以编辑修改文件。编辑模式下 按“esc”键返回一般模式。 按一次“Insert”键 (一般在键盘回格键右边)作用和“i”一样表示“插入”。按两次“Insert”键表示“替换”,作用为:...

ZHENG-JY ⋅ 3分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

阿里云云栖社区 ⋅ 8分钟前 ⋅ 0

Linux操作系统有何优势?Linux学习

  当今世界流行的操作系统有3大类,Linux、Mac OS和Windows操作系统,Linux操作系统因其开源、免费、跨平台、良好的界面等特性,深受广大程序员们的青睐!   Linux操作系统被广泛的应用于...

老男孩Linux培训 ⋅ 9分钟前 ⋅ 0

Spring Cloud Spring Boot mybatis分布式微服务云架构 开发Web应用

静态资源访问 在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static /pub...

itcloud ⋅ 13分钟前 ⋅ 0

6月19日任务 设置更改root密码、连接mysql、mysql常用命令

13.1 设置更改root密码 1. /usr/local/mysql/bin/mysql -uroot 设置环境变量 : export PATH=$PATH:/usr/local/mysql/bin/ 永久生效: vim /etc/profile 加入 export PATH=$PATH:/usr/local/m......

吕湘颖 ⋅ 15分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

猫耳m ⋅ 16分钟前 ⋅ 0

Spring MVC controller,return重定向redirect:

@RequestMapping(value="/save",method=RequestMethod.POST)public String doSave(Course course) {log.debug("Info of Course");log.debug(ReflectionToStringBuilder.toStr......

颖伙虫 ⋅ 24分钟前 ⋅ 0

JavaSE——线程介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 线程: 介绍:管线程叫多任务处理,首先你得知道...

凯哥学堂 ⋅ 27分钟前 ⋅ 0

ORM——使用spring jpa data实现逻辑删除

前言 在业务中是忌讳物理删除数据的,数据的这个对于一个IT公司可以说是最核心的资产,如果删除直接就物理删除,无疑是对核心资产的不重视,可能扯的比较远,本文最主要是想通过spring jpa ...

alexzhu592 ⋅ 34分钟前 ⋅ 0

CDN caching

Incapsula应用感知CDN使用智能分析和频率分析来动态缓存内容,并最大限度地提高效率。确保可直接从RAM获取最常访问的资源,而不依赖于较慢的访问机制。 1、 静态内容缓存 Incapsula缓存静态内...

上树的熊 ⋅ 37分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部