클릭 시 요소 표시 및 숨기기

이 튜토리얼 내에서:

1. 요소를 표시하는 애니메이션 구성
2. 요소를 사라지게 만드는 애니메이션 개발
3. 추가 트리거 요소를 통합하여 클릭 시 표시/숨기기를 모두 표시하고 구성합니다.

요소를 보여주는 애니메이션 설정

1. 개시자로 사용할 요소를 선택합니다(예: "공개" 버튼)
2. 상호 작용 패널의 선택한 요소 드롭다운에서 마우스 클릭(탭)을 선택하세요.
3. 첫 번째 클릭 시 내에서 애니메이션 시작을 선택합니다.
4. 시간 제한 작업 옆에 있는 추가 기호를 탭하세요.
5. 애니메이션 이름을 "Reveal"로 지정합니다.
6. 표시하려는 요소를 선택합니다(개시자와 구별됨).
7. 시간 제한 작업 옆에 있는 추가 기호를 탭하고 숨기기/표시를 선택하세요.
8. 디스플레이를 없음으로 구성하려면 눈 아이콘을 탭하세요.
9. 초기 상태로 설정 옆의 확인란을 선택합니다.
10. 상호 작용 패널 디스플레이 내에서 추가 기호를 클릭하여 시간 제한 작업 아래에 두 번째 숨기기/표시 작업을 소개합니다.
11. 숨기기/표시 섹션에서 표시 설정을 원래 값으로 복원합니다(예: 시나리오에서는 차단).

요소를 사라지게 만드는 애니메이션 구성

1. 이전 단계에서 동일한 시작 요소를 선택하십시오.
2. 두 번째 클릭 시 내에서 애니메이션 시작을 선택합니다.
3. 시간 제한 작업 옆에 있는 추가 기호를 탭하세요.
4. 애니메이션 이름을 "Conceal"로 지정합니다.
5. 사라지고 싶은 이전 단계의 동일한 요소를 선택하세요.
6. 시간 제한 작업 옆에 있는 추가 기호를 탭하고 숨기기/표시를 선택하세요.
7. 디스플레이를 없음으로 구성하려면 눈 아이콘을 탭하세요.

다른 트리거 요소를 통합하고 클릭 시 둘 다 표시/숨기도록 구성

1. 원래 시작 요소를 복제합니다('가사 표시' 텍스트).
2. 이름 변경(예: "가사 숨기기")
3. 작업을 설정하고 초기 상태 표시를 없음으로 조정합니다.
4. 두 번째 작업을 통합하고 표시를 원래 값으로 설정합니다(예: 차단).
5. "가사 표시"를 선택하고 클릭 시 숨기려면 표시 설정이 없음인지 확인하세요.
6. "가사 숨기기"를 클릭하고 표시를 없음으로 설정하는 애니메이션을 추가하세요.
7. "가사 표시"로 돌아가서 두 번째 클릭 시 애니메이션이 다시 표시되도록 애니메이션을 추가하세요.
8. 모든 시간 제한 작업을 클릭하고 동시에 발생하도록 정렬합니다(0초).

‍

‍

FAQ와 같은 콘텐츠를 점진적으로 공개하는 아코디언 개발에 관심이 있으십니까? 맞춤형 아코디언을 만드는 과정을 살펴보세요.