집 > 기사 > 웹 프론트엔드 > Vue는 멋진 메뉴 플러그인 예제를 구현합니다.

Vue는 멋진 메뉴 플러그인 예제를 구현합니다.

小云云원래의: 2017-12-21 11:10:311826검색

최근에 매우 멋진 메뉴 플러그인을 보았고 항상 이를 Vue 형식으로 수정하고 싶었습니다. 이것이 사랑:수심:으로 간주되지 않는다면 제가 열렬한 Vue 팬이라는 것을 누가 알겠습니까? :웃음: 조금 재미있게 놀면서 함께 흑마술을 탐구해 봅시다. 이 튜토리얼을 시청하는 독자는 Vue 및 CSS3에 대한 특정 지식이 필요합니다. 이 기사에서는 Vue를 기반으로 하는 멋진 메뉴 플러그인을 구현하는 방법을 주로 소개합니다. 이 튜토리얼에서는 CSS 및 Vue에 대한 특정 기본 지식이 필요합니다. 단계별로 매우 자세하게 설명되어 있으니 필요하신 분은 참고해 보시기 바랍니다. 모두에게 도움이 되기를 바랍니다.

이 기사의 구조

2. 사용법 소개

3. 주요 단계 설명

pic_1

pic2

pic_3

온라인 시연 라이브 데모

2. 사용 소개

프로젝트 주소: github.com/MingSeng-W/vue-bloom-menu, 프로젝트를 로컬로 복제합니다

a. 파일 구성 요소, 공통 폴더 스타일러스에서 menuConfig.stylus.

b를 가져옵니다. 해당 매개변수를 구성합니다

선택 매개변수

* 반경: 기본값은 100픽셀, 항목과 메뉴 버튼 사이의 거리입니다.

* 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

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

pic_6

좋다고 생각하시면 서둘러서 저장해두셔도 됩니다.

Vue는 멋진 메뉴 플러그인 예제를 구현합니다.

관련 기사