맞춤형 아코디언 개발

개인화된 아코디언을 제작하려면 드롭다운 요소와 상호 작용을 활용해야 합니다. 이 튜토리얼에서는 다음을 다룹니다.

1. 드롭다운 요소를 삽입하는 방법
2. 드롭다운 스위치를 맞춤설정하는 방법
3. 아코디언을 디자인하는 방법
4. 맞춤형 애니메이션 제작 방법‍

드롭다운 요소를 포함하는 방법

그만큼 쓰러지 다 요소에는 개인화된 아코디언으로 사용을 단순화하는 기본 내장 기능이 포함되어 있습니다. 드롭 다운 목록 페이지의 고유한 요소나 일부를 클릭하면 해당 내용이 숨겨집니다. 

다음으로 이동하여 드롭다운 요소를 웹사이트에 통합할 수 있습니다. 패널 추가 (답) > 강요 > 고급의 그리고 쓰러지 다 요소를 캔버스에 추가합니다. 

기본 드롭다운 스타일을 수정하는 방법

개인화된 아코디언에 드롭다운을 통합하려면 기본 드롭다운 요소 스타일을 조정해야 합니다. 특히, 드롭다운이 상위 요소(즉, 사용자 정의 아코디언을 포함하는 요소)의 전체 공간을 차지하도록 너비를 수정해야 합니다. 

보너스 팁: 할당 수업 스타일 재사용을 위해 드롭다운(예: '아코디언 항목')에 추가하세요. 클래스를 사용한 스타일 지정에 대해 자세히 알아보세요.

기본 드롭다운 스타일을 조정하려면: 

1. 부모를 선택하세요 쓰러지 다 디자이너 캔버스의 요소(이 경우 "아코디언 항목" 클래스로 지정함)
2. 방문하다 스타일 패널 > 크기
3. 지정하다 너비 ~처럼 100%

드롭다운 스위치를 개인화하는 방법

지금 이 순간에는 개인화해야 합니다. 드롭다운 스위치 따라서 상위 요소(예: 컨테이너)를 완전히 채우고 아코디언이 닫힐 때 드롭다운 목록 내의 콘텐츠를 숨깁니다. 이를 수행하려면 드롭다운 스위치의 표시하다 그리고 키 속성:

1. 선택 드롭다운 스위치 캔버스에서 클래스를 할당합니다(예: "아코디언 토글")
2. 로 이동 스타일 패널 > 공들여 나열한 것
3. 세트 표시하다 에게 플렉스박스 완전한 수평 범위를 위해
4. 세트 맞추다 에게 센터 아코디언을 중심으로 하는 세로 텍스트의 경우
5. 로 진행 스타일 패널 > 크기
6. 정의하다 키 값(예: 80px)

아코디언을 디자인하는 방법

이 단계 후에 사이트를 테스트하고 아코디언과 상호 작용하면 아코디언이 펼쳐지지만 내부의 기본 콘텐츠가 주변 콘텐츠와 겹칠 수 있음을 관찰할 수 있습니다. 이는 기본값 때문에 발생합니다. 위치 드롭다운 목록의 스타일은 다음과 같습니다. 순수한. 이는 메뉴나 탐색 모음과 같은 기존 드롭다운 사용에 바람직한 동작이지만, 개인화된 아코디언의 경우 아코디언 내부 콘텐츠가 확장될 때 주변 콘텐츠가 조정(예: 아래 또는 위로 이동)되도록 기본 위치를 변경해야 합니다. 

아코디언을 혁신하려면: 

1. 부모를 선택하세요 쓰러지 다 캔버스의 요소(예: "아코디언 항목") 
2. “를 선택하세요.장부” 아이콘 공개 드롭다운 설정 그리고 “보여주다"에 인접 항해
3. 다음을 선택하세요. 리스트 박스 대지의 옵션
4. 로 이동 디자인 패널 > 조정
5. 조정하다 조정 에게 결정된
6. 아트보드에서 상위 드롭다운 요소(예: "아코디언 항목")를 선택합니다.
7. 이동 디자인 패널 > 치수
8. 세트 마스크 에게 숨기는 아코디언 영역을 벗어나는 콘텐츠를 가리기 위해

맞춤형 애니메이션을 디자인하는 단계

이제 다음 단계에 따라 사용자 정의 아코디언 열기 및 닫기를 모두 처리하는 고유한 애니메이션을 만듭니다. 

1. 초기 조치 수립
2. 아코디언 확장 애니메이션
3. 아코디언 클로저 애니메이션

초기 조치 수립

아코디언에 대한 2가지 초기 작업(즉, 페이지 로드 전에 요소에 적용되는 스타일)을 만들어 시작하세요.

먼저 드롭다운에 대한 초기 작업을 시작합니다. 

1. 다음을 선택하세요. 쓰러지 다 아트보드의 요소(예: "아코디언 항목")
2. 로 이동 상호작용 패널 > 요소 트리거 그리고 '를 탭하세요....을 더한” 기호를 사용하여 새로운 요소 트리거를 생성합니다.
3. 선택하다 드롭다운이 펼쳐집니다.
4. 수도꼭지 작업을 선택하세요 아래에 메뉴 공개
5. 선택하다 애니메이션 실행 아래에 맞춤형 애니메이션
6. '를 탭하세요....을 더한” 기호 옆에 예약된 애니메이션
7. 맞춤 애니메이션에 이름을 지정하세요(예: '아코디언 확장').
8. '를 탭하세요....을 더한" 기호 옆에 활동 애니메이션에 액션을 통합하려면
9. 선택하다 크기 아래에 다양한
10. 아래에 "초기 상태로 설정" checkbox를 표시합니다. 타이밍
11. 다음을 입력하세요. 키 값(예: 80px) 미만 크기 그것은 당신에게 주어진 높이와 일치합니다. 쓰러지 다스위치 (예: "아코디언 스위치") 이전 단계에서
12. 수도꼭지 구하다

그런 다음 스위치 아이콘에 대한 초기 작업을 시작합니다. 

1. 선택하세요 상징 드롭다운 요소 내부
2. 다음으로 향하세요. 디자인 패널 아이콘 클래스에 라벨을 지정합니다(예: "아코디언 아이콘"). 이제 애니메이션이 아이콘의 모든 인스턴스에 영향을 미칠 수 있습니다.
3. 조상을 선택하세요 쓰러지 다 아트보드의 요소(예: "아코디언 항목")
4. 펼치다 상호작용 패널 
5. 다음을 선택하세요. 드롭다운이 펼쳐집니다. 이전 단계에서 만든 상호 작용
6. '를 탭하세요.기어이전에 제작한 사용자 지정 시간 애니메이션 옆에 있는 기호(예: "아코디언 확장" 상호 작용)
7. 다음을 선택하세요. 상 (예: '아코디언 아이콘')
8. '를 탭하세요....을 더한" 기호 옆에 활동 아이콘에 대한 초기 작업을 설정하려면 
9. 선택하다 회전 아래에 바꾸다 
10. 아래에 "초기 상태로 설정" checkbox를 표시합니다. 타이밍 
11. 향하다 회전 그리고 전화를 겁니다 Z축 에게 0도
12. 수도꼭지 구하다

아코디언 확장 애니메이션

다음으로, 아코디언을 클릭할 때 동시에 발생하는 아코디언 확장 작업을 설정합니다. "아코디언 항목" 크기는 그 안의 콘텐츠 크기에 맞게 조정되고 "아코디언 아이콘"은 180도 회전합니다. 

"아코디언 항목"의 크기를 변경하고 아코디언을 열 때 "아코디언 아이콘"을 회전하려면: 

1. 조상을 선택하세요 쓰러지 다 아트보드의 요소(예: "아코디언 항목")
2. 잠금을 해제 상호작용 패널 
3. 선택 드롭다운이 펼쳐집니다. 이전에 공식화한 상호 작용
4. '를 탭하세요.기어이전 단계에서 만든 사용자 정의 시간 애니메이션 옆에 있는 " 기호(예: "아코디언 열기" 애니메이션) 
5. '를 탭하세요....을 더한" 기호 옆에 행위 애니메이션에 작업을 삽입하려면
6. 선택하다 크기 이내에 여러 가지 잡다한
7. 아래의 "초기 상태로 설정" checkbox 선택을 취소합니다. 타이밍
8. 로 이동 크기 그리고 “자동"에 대한 키 — 이는 내부 내용에 대한 아코디언의 높이에 해당합니다. 
9. 선택하세요 상 (예: '아코디언 아이콘')
10. '를 탭하세요....을 더한"아코디언 항목" 옆에 있는 " 기호 크기 해당 타임스탬프에 다른 작업을 추가하기 위해 방금 설정한 작업 — 이는 두 작업이 동시에 활성화되도록 보장합니다.
11. 선택하다 회전 ~ 아래에 변환  
12. 향하다 회전 그리고 조정 Z축 에게 180도 — 아코디언이 열릴 때 위쪽을 향하도록 아이콘을 회전시킵니다.
13. 수도꼭지 구하다

메모: 각 작업의 지역권(예: 애니메이션 전환의 가속 및 감속)을 수정할 수 있는 옵션이 있습니다. 보간, 지역권 및 평활화에 대한 자세한 정보를 얻으십시오.

아코디언 닫힘 애니메이션

다음으로 아코디언 닫기를 위한 상호 작용을 설정합니다. 이 상호 작용에는 아코디언 항목을 두 번째로 누르거나 방문자가 아코디언 항목 외부를 클릭할 때 발생하는 작업이 포함됩니다. 아코디언 항목은 초기 크기로 돌아가고 아이콘은 다시 0도로 회전합니다. 

아코디언 닫기를 애니메이션하려면 다음을 수행하십시오.

1. 부모를 선택하세요 쓰러지 다 캔버스의 요소(예: "아코디언 항목")
2. 공개하다 상호 작용 패널 
3. 다음을 선택하세요. 드롭다운이 열립니다. 이전 단계에서 디자인한 상호 작용 
4. 수도꼭지 작업을 선택하세요 ~ 아래에 메뉴가 닫힙니다. 
5. 선택하다 애니메이션 시작
6. '를 탭하세요....을 더한맞춤 애니메이션을 제작하려면 시간 제한 애니메이션 옆에 ' 기호를 표시하세요.
7. 사용자 정의 애니메이션에 이름을 지정합니다(예: "아코디언 닫기")
8. '를 탭하세요....을 더한” 기호를 사용하여 애니메이션에 작업을 삽입합니다.
9. 선택하다 크기 ~ 아래에 여러 가지 잡다한
10. 입력 키 할당한 높이와 일치하는 값(예: 80px) 쓰러지 다 이전 단계의 초기 상태에 대한 요소
11. 선택 상 캔버스 또는 네비게이터(예: "아코디언 아이콘")
12. '를 탭하세요....을 더한"아코디언 항목" 옆에 있는 " 기호 크기 해당 타임스탬프에 다른 작업을 추가하기 위해 방금 만든 작업 — 이렇게 하면 두 작업이 동시에 애니메이션화됩니다.
13. 선택하다 회전 ~ 아래에 변환 
14. 향하다 회전 그리고 조정 Z축 에게 0도 — 아코디언이 닫힐 때 아이콘이 아래쪽을 향하도록 아이콘을 다시 초기 위치로 회전시킵니다.
15. 수도꼭지 구하다

이것으로 상호 작용을 사용하여 독특한 아코디언을 성공적으로 만들었습니다!