Vue 학습

10장. Vue의 트랜지션 및 애니메이션

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

적절한 상태 관리를 통한 경로 및 데이터 흐름 처리 등 제대로 작동하는 Vue 애플리케이션을 구축하는 데 있어 중요한 모든 측면을 살펴봤습니다. 이 장에서는 애니메이션과 트랜지션, 트랜지션 컴포넌트, 후크 및 CSS를 사용하여 사용자 경험을 향상시키는 고유한 Vue 기능에 대해 살펴봅니다.

CSS 전환 및 CSS 애니메이션 이해하기

CSS 애니메이션은 특정 요소나 컴포넌트의 상태 변화에 따른 시각적 효과로, 상태 수에 제한이 없습니다. CSS 애니메이션은 명시적인 트리거링 없이 자동으로 시작되어 루프로 이동할 수 있습니다. 이와 대조적으로 CSS 전환은 버튼의 경우 평균에서 호버로, 툴팁의 경우 숨김에서 표시로 두 가지 상태 사이의 변화에만 반응하는 애니메이션입니다. CSS 애니메이션을 정의하려면 @keyframes 규칙을 사용한 다음 대상 요소에animation 속성을 사용하여 대상 요소에 적용합니다. 예를 들어버튼에 간단한 애니메이션 효과를 정의할 수 있습니다 :

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.button {
  animation: pulse 2s infinite;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

간단한 애니메이션 효과인 pulse 를 정의하고 button 클래스가 있는 모든 요소에 적용하면 상자 그림자가 2초 동안 반복적으로 확장 및 축소됩니다. 이 효과는 요소가 DOM에 존재하는 경우 무한히 실행됩니다.

그림 10-1. 무한 펄스 애니메이션 효과

한편 transition 속성을 사용하여 사용자가 특정 요소 위로 마우스를 가져갔을 때 특정 요소에 대한 전환 효과를 정의할 수 있습니다:

.button {
  transition: background-color 0.5s ease-in-out;
}

.button:hover {
  background-color: #ff0000;
}

이 코드에서는 button 요소에 간단한 전환 효과를 만들었습니다. 마우스를 가져가면 배경색이 기본 색상에서 빨간색으로 바뀌고 0.5 초의 지연과 함께 ease-in-out 의 스무딩 효과가 적용됩니다. 또는 JavaScript 및 기타 애니메이션 라이브러리를 사용하여 프로그래밍 방식으로 전환 및 애니메이션을 정의할 수도 있습니다.

트랜지션과 애니메이션은 애플리케이션을 사용할 때 사용자에게 훨씬 더 부드러운 경험을 제공합니다. 그러나 전환 및 애니메이션 작업은 때때로 어려울 수 있습니다. 뷰 ...