关键代码:
计算每个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
关键代码
至此所有步骤讲解完毕
总结
以上所述是小编给大家介绍的基于 Vue 实现一个酷炫的 menu插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持！