Vue에서 멋진 메뉴 플러그인 구현에 대한 자세한 설명

이 글에서는 주로 Vue 기반의 멋진 메뉴 플러그인을 소개합니다. 이 튜토리얼에서는 CSS와 Vue에 대한 특정 기본 지식이 필요합니다. 이 글에서는 단계별로 자세히 소개합니다. . 모든 사람에게 도움이 되기를 바랍니다.

Written in front

최근에 아주 멋진 메뉴 플러그인을 보았는데, 항상 그것을 vue 형식으로 만져보고 싶었습니다. 누가 제가 열렬한 vue 팬이라고 말했습니까? 사랑:생각에 잠긴:. :웃음: 조금 재미있게 놀면서 함께 흑마법을 탐구해 봅시다. 이 튜토리얼을 시청하는 독자는 vue 및 css3에 대한 특정 지식이 필요합니다.

1. 효과 데모

2. 주요 단계 설명

텍스트

1.

pic_1

pic2

pic_3

온라인 데모 라이브 데모

2 사용 소개

프로젝트 주소: github.com/MingSeng-W/vue -블룸 메뉴, 프로젝트를 Local

a로 복제합니다. 먼저 단일 파일 구성 요소에 menuConfig.stylus.

b를 가져옵니다. 선택적 매개 변수

* 반경: 기본값은 100px입니다. distance 메뉴 버튼 사이의 거리입니다.

* startAngle:defaut가 0이면 항목의 시작 각도는 시계의 3시 방향을 0으로 기록하고 시계 방향이 증가하는 방향입니다.

* endAngle: 기본값은 마지막 항목의 각도인 315입니다.

* itemNum: 기본값은 8

* animationDuration: 기본값은 0.5초, 각 항목의 실행 시간 animation

* itemAnimationDelay: 기본값은 0.04s, 각 항목 간 애니메이션 트리거 간의 지연 시간

필수 매개변수

* iconImgArr

필요한 아이콘을 가져온 다음 iconImgArr(계산된 속성 바인딩)을 생성하고 이를 메뉴 구성요소에 소품으로 전달합니다.

메뉴의 위치

현재 지정된 메뉴 클래스에는 중앙과 모서리라는 두 가지 위치가 있습니다. . 센터 클래스: .menu-center-wrapper

corner 클래스: .menu-left-corner-wrapper. 물론 위치를 직접 지정해도 괜찮습니다.

간단한 예

demo

3. 주요 단계 설명

전체 메뉴 구현의 핵심은 메뉴 확장 후 최종 좌표 계산과 확장 및 축소 애니메이션입니다. (전체 프로젝트 레이아웃은 비교적 간단하므로 여기서는 로직과 애니메이션 구현을 중심으로 설명합니다.)

Step 1: 메뉴를 확장한 후 가로 좌표와 세로 좌표를 계산합니다

아래의 x와 y는 프로젝트의 위치를 ​​나타냅니다. x를 예로 들어 페이지의 항목을 각각 표시합니다.

x 애니메이션 실행 시간.

위치 설명

위치 계산: 먼저 각 항목 사이의 각도를 계산합니다. 시작 항목은 시계 방향으로 배치되며 각 항목 사이의 각도는 (endAngle-startAngle)/(itemNum-1)과 같습니다. 현재 항목이 회전되어야 하는 각도는 다음과 같습니다: angleCur=startAngle+index*각 항목 사이의 각도. 항목의 회전 각도를 얻은 후 Math.cos 및 Math.sin에 반경을 곱하여 가로 좌표와 세로 좌표를 가져옵니다.

키 코드:

각 항목의 각도를 계산합니다

위치

두 번째 단계는 js를 사용하여 생성된 좌표를 기반으로 애니메이션을 동적으로 생성하고 이를 스타일 파일에 삽입하는 것입니다.

확장 및 축소 키프레임 생성

이 단계에서 확장 및 축소할 메뉴 클릭이 완료되었습니다.

두 번째 단계는 해당 항목을 클릭한 후 해당 항목의 확대 및 사라짐을 완료하면 다른 항목은 축소되어 사라집니다.

항목이 사라지는 키프레임

항목이 사라지는 키프레임

애니메이션은 전환을 제공하기 위해 vue를 사용하여 여기에서 트리거됩니다. -show가 false일 때, 즉 디스플레이가 없을 때 애니메이션이 트리거됩니다.

각 항목 애니메이션이 완료된 후 animationEnd 이벤트가 트리거되고 해당 항목의 animationEnd 이벤트가 모니터링됩니다. 모든 애니메이션이 순차적으로 트리거되면 메뉴가 닫히도록 알림이 표시됩니다(상위-하위 구성 요소 통신).

메뉴 컴포넌트에서 v-on을 사용하여 animationEnd 이벤트를 수신합니다. 항목 자체의 애니메이션이 실행된 후 $emit을 통해 animationEnd 이벤트가 트리거되어 메뉴의 애니메이션 개수 count++에 도달합니다. 항목, 메뉴가 닫힙니다.

code

code

메뉴를 다시 열 때 해당 항목에 바인딩된 showItem이 false인지 확인하고, 그렇다면 true로 설정하세요. 클릭 시 클릭한 항목의 인덱스를 가져와야 하며, 클릭한 항목의 인덱스인 전역 currentIndex를 가져와야 합니다. 클릭한 것은 확대 애니메이션을 사용하고, 그렇지 않으면 축소 애니메이션을 사용합니다. ㅋㅋㅋ 드롭다운으로 구현된 트랩 예- 메뉴 상황에 맞는 메뉴

위 내용은 Vue에서 멋진 메뉴 플러그인 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!