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

Home

Web Front-end

JS Tutorial

Detailed explanation of implementing a cool menu plug-in in Vue

小云云

Jan 19, 2018 am 11:24 AM

menu plug-in Detailed explanation

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.

pic_6

Related recommendations:

html: menu tag Detailed explanation of defining menu list

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7707

Java Tutorial

1640

CakePHP Tutorial

1394

Laravel Tutorial

1288

PHP Tutorial

1232

Related knowledge

PyCharm Beginner's Guide: Comprehensive understanding of plug-in installation! Feb 25, 2024 pm 11:57 PM

PyCharm is a powerful and popular Python integrated development environment (IDE) that provides a wealth of functions and tools so that developers can write code more efficiently. The plug-in mechanism of PyCharm is a powerful tool for extending its functions. By installing different plug-ins, various functions and customized features can be added to PyCharm. Therefore, it is crucial for newbies to PyCharm to understand and be proficient in installing plug-ins. This article will give you a detailed introduction to the complete installation of PyCharm plug-in.

Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

Share three solutions to why Edge browser does not support this plug-in Mar 13, 2024 pm 04:34 PM

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

What is the Chrome plug-in extension installation directory? Mar 08, 2024 am 08:55 AM

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

Detailed explanation of obtaining administrator rights in Win11 Mar 08, 2024 pm 03:06 PM

Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer

Detailed explanation of division operation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL

Does PyCharm Community Edition support enough plugins? Feb 20, 2024 pm 04:42 PM

Does PyCharm Community Edition support enough plugins? Need specific code examples As the Python language becomes more and more widely used in the field of software development, PyCharm, as a professional Python integrated development environment (IDE), is favored by developers. PyCharm is divided into two versions: professional version and community version. The community version is provided for free, but its plug-in support is limited compared to the professional version. So the question is, does PyCharm Community Edition support enough plug-ins? This article will use specific code examples to

Detailed explanation of how to install and set up the EclipseSVN plug-in Jan 28, 2024 am 08:42 AM

Detailed explanation of how to install and set up the EclipseSVN plug-in Eclipse is a widely used integrated development environment (IDE) that supports many different plug-ins to extend its functionality. One of them is the EclipseSVN plugin, which enables developers to interact with the Subversion version control system. This article will detail how to install and set up the EclipseSVN plug-in and provide specific code examples. Step 1: Install the EclipseSVN plug-in and open Eclipse

See all articles