Detailed explanation of implementing a cool menu plug-in in Vue-JS Tutorial-php.cn

This article mainly introduces you to implement a cool menu plug-in based on Vue. This tutorial requires you to have certain basic knowledge of css and vue. This article introduces you step by step in very detail. Friends who need it can refer to it. I hope Can help everyone.

Written in front

I recently saw a very cool menu plug-in, and I have always wanted to tinker with it into vue form. Who told me that I am a die-hard fan of vue, if this Not even love :pensive:. :laughing: Let’s have a little fun and explore black magic together. Readers watching this tutorial need to have certain knowledge of vue and css3.

Structure of this article

1. Effect demonstration

2. Introduction to usage

3. Explanation of key steps

Text

1. Effect demonstration

pic_1

pic2

pic_3

Online demonstration live demo

2. Introduction to use

Project address: github .com/MingSeng-W/vue-bloom-menu, clone the project to the local

a. First introduce the menu component in the single file component, and import menuConfig.stylus.

# in the common folder stylus. ##b. Configure the corresponding parameters

Optional parameters

* radius: default is 100px, the distance between the item and the menu button.

* startAngle: defaut is 0, the angle at which the item starts is recorded as 0 with the 3 o'clock direction of the clock, and then the clockwise direction is the increasing direction.

* endAngle: default is 315, the angle of the last item.

* itemNum: default is 8

* animationDuration: default is 0.5s, the execution time of each item animation

* itemAnimationDelay: default is 0.04s, each item Interval delay time between animation triggers

Required parameters

* iconImgArr

Import the icon you need, and then generate iconImgArr (computed attribute binding) and pass it as props For the menu component

The position of the menu

Currently there are two positions, center and corner, which are specified in the menu class. center’s class: .menu-center-wrapper

corner’s class: .menu-left-corner-wrapper. Of course, it’s OK to specify the location yourself.

A simple example

demo

3. Explanation of key steps

The key to the implementation of the entire menu lies in calculation The final coordinates after the menu is expanded, as well as the animation of expansion and contraction. (Since the layout of the entire project is relatively simple, here we mainly explain the implementation of logic and animation)

Step 1: Calculate the horizontal and vertical coordinates after the menu is expanded The x and y below the coordinates

respectively represent the position of the item on the page, taking x as an example.

x: The original position, the last expanded position of x2, the transition position in the middle of x1 (mainly causing a "pull back" effect), the following is a picture explanation, in order to explain simply and clearly, I enlarged the radius Multiply and increase the animation execution time.

Position explanation

Calculation of position: First calculate the angle between each item. The starting item is laid out clockwise. The angle between items is equal to (endAngle-startAngle)/(itemNum-1). The angle at which the current item should be rotated is: angleCur=startAngle+index*the angle between each item. After getting the rotation angle of the item, multiply Math.cos, Math.sin and radius to get its abscissa and ordinate.

Key code:

Calculate the angle of each item

Position explanation

The second step is to use js to dynamically generate animtion based on the generated coordinates and insert it into the style file middle.

Generate keyframe for expansion and contraction

At this step we have completed clicking the menu to expand and contract.

The second step is to complete clicking on the item and the item will enlarge and disappear, and other items will shrink and disappear

keyframe where the item disappears

Keyframe where item disappears

The animation is triggered here using vue to provide transition. When the v-show of the element is false, that is, when the display is none, the animation is triggered.

After each item animation is completed, the animationEnd event will be triggered, and the animationEnd event of the item will be monitored. When all animations are triggered in sequence, the menu will be reminded to be closed (parent-child component communication).

I use v-on in the menu component to listen to the animationEnd event. After the item's own animation is executed, the animationEnd event is triggered through $emit to notify the menu's animation count count++. When the count reaches the total number of items, menu to close.

code

When you open the menu again, check whether the showItem bound to the item is false, and if so, set it to true. When clicking, you need to get the index of the clicked item, and get the global currentIndex, which is the index of the clicked item. The clicked one uses the zoom-in animation, otherwise the zoom-out animation is used.