实现一个酷炫的,用vue做一个酷炫的menu

时间:2019-06-05 23:08来源:亚洲城ca88唯一官方网站
menu的位置     2个简短的example demo 贰.利用介绍        项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a.首先在单文件组件里引进menu组件,导入common文件夹stylus里的m

menu的位置

   2个简短的example

亚洲城ca88唯一官方网站 1

demo

贰.利用介绍

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

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

       b.配置相应的参数

* itemAnimationDelay:default为0.0四s,每一种item之间animation触发的距离延迟时间

正文

一.功力演示

 

亚洲城ca88唯一官方网站 2

 

亚洲城ca88唯一官方网站 3

 

 

亚洲城ca88唯一官方网站 4

     在线演示live demo

pic2

            可选参数

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

            *  startAngle:defaut为0,item起首的角度,以石英钟三点钟方向记为0,然后顺时针方向为递增趋势。

           *  endAngle:default为3一5,最后二个item的角度。

           *  itemNum:default为8

            *  animationDuration:default为0.伍s,每一个item动画的实践时间

            *  itemAnimationDelay:default为0.0四s,每种item之间animation触发的区间延迟时间

本文结构

1.效用演示

二.利用方法介绍

三.关键步骤讲明

其次步,完结点击item之后item放大与消亡,其余的item裁减与未有

本文结构

壹.职能演示

二.施用办法介绍

叁.关键步骤讲授

    第3步:总计menu展开后横坐标和纵坐标

        上面包车型地铁x,y分别代表item在页面包车型地铁岗位,以x为例。

    x:原始的岗位,x贰最终实行的岗位,x1中间的过渡地点(主借使导致1个“拉回”的职能),以下是图形表达,为了表明轻松明了,小编推广了radius倍数以及扩张了动画片的实施时间。

 

亚洲城ca88唯一官方网站 5

职位解释

    地方的总计:首先总计每一个item之间的夹角,以机械钟3点方位的地方记0,往顺时针方向的岗位依次递增,种种item之间的夹角等于(endAngle-startAngle)/(itemNum-一)。当前item应该旋转的角度为:angleCur=startAngle index*每种item之间的夹角。获得item的转动角度之后,用Math.cos和Math.sin和radius相乘获得其横坐标和纵坐标.

    关键代码:

亚洲城ca88唯一官方网站 6

总结各种item的夹角

亚洲城ca88唯一官方网站 7

岗位解释

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

亚洲城ca88唯一官方网站 8

变化打开和收缩的keyframe

到这一步大家达成了点击menu张开与收缩。

corner的class:.menu-left-corner-wrapper。当然自身钦定地方也是ok的。

3.关键步骤解说

    整个menu的落到实处关键在于总计menu张开后最后的坐标,以及进行与收缩的动画.(由于整个项目布局相比较简单,所以那边根本讲明逻辑和动画的贯彻)

3.关键步骤解说

    整个menu的落成关键在于总结menu张开后最后的坐标,以及开始展览与减弱的动画.(由于全数项目布局比较轻松,所以这里关键教学逻辑和卡通片的落到实处)

一.功力演示

二.使用介绍

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

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

       b.配置相应的参数

   亚洲城ca88唯一官方网站,三个简短的example

亚洲城ca88唯一官方网站 9

demo

到这一步大家做到了点击menu张开与收缩。

          必选参数

            * iconImgArr

        import您须要的icon,然后生成iconImgArr(computed属性绑定),作为props传给menu组件

          必选参数

            * iconImgArr

        import您必要的icon,然后生成iconImgArr(computed属性绑定),作为props传给menu组件

各样item动画达成后都会触发animationEnd事件,监听item的animationEnd事件,当有着动画依次触发实现之后,提醒menu置于关闭状态( 父亲和儿子组件通讯 )。

    第一步,完毕点击item之后item放大与未有,其余的item缩短与消亡

    item消失的keyframe

    

亚洲城ca88唯一官方网站 10

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

亚洲城ca88唯一官方网站 11

code

亚洲城ca88唯一官方网站 12

code

亚洲城ca88唯一官方网站 13

      再一次展开menu的时候检查与item绑定的showItem是不是为false,是的话置为true。点击时索要得到被点击item的index,获得全局的currentIndex即被点击的item的index。被点中的使用放大动画,不然使用减弱动画。

亚洲城ca88唯一官方网站 14

pic_6

亚洲城ca88唯一官方网站 15

重中之重代码

迄今全数手续批注截止

    第壹步,完毕点击item之后item放大与消亡,别的的item收缩与未有

    item消失的keyframe

    

亚洲城ca88唯一官方网站 16

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

亚洲城ca88唯一官方网站 17

code

亚洲城ca88唯一官方网站 18

code

亚洲城ca88唯一官方网站 19

 

      再度展开menu的时等候检查查与item绑定的showItem是还是不是为false,是的话置为true。点击时必要得到被点击item的index,得到全局的currentIndex即被点击的item的index。被点中的选择放大动画,不然使用缩短动画。

亚洲城ca88唯一官方网站 20

入眼代码 

亚洲城ca88唯一官方网站 21

 

迄今全体手续疏解甘休,欢迎star和pr

 

* itemNum:default为8

    第1步:总结menu打开后横坐标和纵坐标

        上边包车型大巴x,y分别表示item在页面包车型大巴职责,以x为例。

    x:原始的任务,x贰最后实行的任务,x第11中学间的对接地点(首假若变成叁个“拉回”的意义),以下是图片表明,为了讲授简单明了,小编推广了radius倍数以及扩充了动画的执行时间。

亚洲城ca88唯一官方网站 22

地点解释

    地方的图谋:首先计算各个item之间的夹角,以时钟叁点方位的岗位记0,往顺时针方向的任务依次递增,各种item之间的夹角等于(endAngle-startAngle)/(itemNum-一)。当前item应该旋转的角度为:angleCur=startAngle index*各类item之间的夹角。得到item的团团转角度之后,用Math.cos和Math.sin和radius相乘获得其横坐标和纵坐标.

    关键代码:

亚洲城ca88唯一官方网站 23

计量各种item的夹角

亚洲城ca88唯一官方网站 24

职分解释

其次步,遵照变化的坐标使用js动态生成animtion,并插入到样式文件中。

亚洲城ca88唯一官方网站 25

变化展开和缩小的keyframe

到这一步大家成功了点击menu张开与收缩。

            可选参数

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

            *  startAngle:defaut为0,item发轫的角度,以时钟3点钟趋势记为0,然后顺时针方向为递增趋势。

           *  endAngle:default为3一伍,最后2个item的角度。

           *  itemNum:default为8

            *  animationDuration:default为0.5s,每种item动画的举办时间

            *  itemAnimationDelay:default为0.04s,各样item之间animation触发的间距延迟时间

pic_1

一.成效演示

亚洲城ca88唯一官方网站 26

pic_1

亚洲城ca88唯一官方网站 27

pic2

亚洲城ca88唯一官方网站 28

pic_3

     在线演示live demo

正文

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

写在前边

        近来看来二个极其酷炫的menu插件,一向想把它鼓捣成vue方式,何人让本身是vue的死灰粉呢,假诺那都不算爱。开个小玩耍,大家联合来探究黑魔法吧。观望本课程的读者必要有所一定的vue和css叁的知识.

写在日前

        近日见到一个分外炫酷的menu插件,平素想把它鼓捣成vue方式,什么人让本人是vue的死灰粉呢,若是那都不算爱。开个小玩耍,大家一齐来搜求黑法力吧。观察本学科的读者要求有所一定的vue和css三的知识.

亚洲城ca88唯一官方网站 29

           menu的位置

    如今有center,corner二种职位,在menu的class里钦赐。center的class:.menu-center-wrapper

corner的class:.menu-left-corner-wrapper。当然自身钦点地点也是ok的。

           menu的位置

    这段日子有center,corner三种职位,在menu的class里钦命。center的class:.menu-center-wrapper

corner的class:.menu-left-corner-wrapper。当然本人钦命地点也是ok的。

code

item消失的keyframe

亚洲城ca88唯一官方网站 30

职位解释

上边包车型地铁x,y分别表示item在页面包车型客车职责,以x为例。

三.关键步骤解说

item消失的keyframe

贰.应用办法介绍

本文结构

* animationDuration:default为0.5s,每一种item动画的推行时间

此处触发动画使用 vue提供transition ,当成分的v-show为false时,约等于display为none时,触发动画。

变迁张开和收缩的keyframe

首要代码

此时此刻有center,corner二种职位,在menu的class里钦定。center的class:.menu-center-wrapper

你大概感兴趣的稿子:

  • vue二 el-menu完成路由跳转及当前项的装置方式实例
  • vue2.0的contextmenu右键弹出美食指南的实例代码
  • imageVue相册Sitemenu插件使用方法及注意事项

总结

亚洲城ca88唯一官方网站 31

一.功能演示

首先步:总括menu张开后横坐标和纵坐标

全套menu的实现关键在于计算menu张开后最后的坐标,以及开始展览与收缩的动画.(由于1切项目布局比较轻巧,所以这里关键教师逻辑和卡通片的落实)

三.关键步骤解说

亚洲城ca88唯一官方网站 32

亚洲城ca88唯一官方网站 33

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

正文

亚洲城ca88唯一官方网站 34 

* endAngle:default为315,最终三个item的角度。

在线演示 live demo

本身在menu组件里使用v-on监听animationEnd事件,item本身的动画片实行后,通过$emit触发animationEnd事件,文告menu的卡通计数count ,当count达到总的项目数的时候,menu进行关闭.

x:原始的任务,x二最终举办的任务,x第11中学间的连结地点(主若是引致一个“拉回”的功能),以下是图形表达,为了表明简单明了,小编推广了radius倍数以及增添了动画片的进行时间。

亚洲城ca88唯一官方网站 35

亚洲城ca88唯一官方网站 36

b.配置相应的参数

上述所述是我给我们介绍的依据 Vue 达成3个酷炫的 menu插件,希望对大家具备帮忙,假使大家有其他疑问请给本身留言,小编会及时复苏我们的。在此也特别谢谢大家对台本之家网址的帮助!

可选参数

双重展开menu的时候检查与item绑定的showItem是或不是为false,是的话置为true。点击时索要得到被点击item的index,获得全局的currentIndex即被点击的item的index。被点中的接纳放大动画,不然使用裁减动画。

测算每一种item的夹角

要害代码:

贰个粗略的example

亚洲城ca88唯一官方网站 37

亚洲城ca88唯一官方网站 38

亚洲城ca88唯一官方网站 39

职务解释

亚洲城ca88唯一官方网站 40

code

亚洲城ca88唯一官方网站 41

亚洲城ca88唯一官方网站 42

* iconImgArr

demo

* startAngle:defaut为0,item开端的角度,以时钟三点钟势头记为0,然后顺时针方向为递增趋势。

近来收看2个相当炫耀的menu插件,平素想把它鼓捣成vue格局,什么人让自家是vue的死灰粉呢,假若那都不算爱:pensive:。:laughing:开个小玩耍,我们1块来探究黑法力吧。阅览本课程的读者需求持有一定的vue和css三的知识.

至此全部手续讲授截止

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

二.施用介绍

必选参数

pic_6

pic_3

岗位的估测计算:首先总结种种item之间的夹角,开端item是顺着顺时针布局的,各样item之间的夹角等于(endAngle-startAngle)/(itemNum-一)。当前item应该旋转的角度为:angleCur=startAngle index*各类item之间的夹角。获得item的转动角度之后,用Math.cos和Math.sin和radius相乘获得其横坐标和纵坐标.

import您须求的icon,然后生成iconImgArr(computed属性绑定),作为props传给menu组件

写在眼下

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

编辑:亚洲城ca88唯一官方网站 本文来源:实现一个酷炫的,用vue做一个酷炫的menu

关键词: 亚洲城ca88