모달 뷰 애니메이션

모달 뷰는 사용자 인터페이스를 차단하여 중요한 메시지를 표시합니다. 앱에서 모달 뷰에 애니메이션을 적용하는 방법을 알아봅니다.

모달 뷰는 중요한 메시지를 전달하고 사용자 인터페이스를 차단해야 할 경우에 적합합니다. 지나치게 사용하면 방해가 되고 쉽게 사용자 경험을 망칠 수 있으므로 신중하게 사용해야 합니다. 하지만 일부 경우에는 이 뷰를 사용하는 것이 합리적이고 애니메이션을 추가하면 생동감이 넘칩니다.

• 모달 뷰는 드물게 사용합니다. 불필요하게 환경을 중단하면 사용자가 실망할 수 있습니다.
• 애니메이션에 배율을 추가하면 멋진 '낙하' 효과가 발생합니다.
• 사용자가 모달 뷰를 닫을 때 신속하게 모달 뷰를 제거합니다. 그러나 사용자가 놀라지 않도록 조금 더 천천히 모달 뷰를 화면에 가져옵니다.

모달 오버레이는 표시 영역에 정렬되어야 하므로 position를 fixed로 설정합니다.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

초기 opacity가 0이므로 뷰에서 숨겨지지만 클릭과 터치가 통과하도록 pointer-events를 none로 설정해야 합니다. 그렇지 않으면 모든 상호작용이 차단되고 전체 페이지가 응답하지 않습니다. 마지막으로 opacity 및 transform에 애니메이션을 적용하기 때문에 will-change를 사용하여 변경 중으로 표시해야 합니다 (will-change 속성 사용 참고).

뷰가 표시되면 상호작용을 허용해야 하며 opacity가 1이어야 합니다.

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

이제 모달 뷰가 필요할 때마다 JavaScript를 사용하여 'visible' 클래스를 전환할 수 있습니다.

modal.classList.add('visible');

이 시점에서 모달 뷰는 애니메이션 없이 표시되므로 이제 이를 추가할 수 있습니다(맞춤 이징 참고).

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

변환에 scale를 추가하면 뷰가 화면에 약간 드롭되는 것처럼 보이게 되어 좋은 효과를 낼 수 있습니다. 기본 전환은 변환 및 불투명도 속성에 모두 적용되며, 맞춤 곡선 및 기간은 0.1초입니다.

이 기간은 매우 짧지만 사용자가 뷰를 닫고 앱으로 돌아가려는 경우에 이상적입니다. 단점은 모달 뷰가 표시될 때 너무 공격적일 수 있다는 것입니다. 이 문제를 해결하려면 visible 클래스의 전환 값을 재정의합니다.

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

이제 모달 뷰가 화면에 표시되는 데 0.3초가 걸리기 때문에 다소 덜 공격적이지만 빠르게 해제되므로 사용자가 높이 평가할 수 있습니다.