웹 애플리케이션의 애니메이션은 제대로만 사용한다면 매우 효과적입니다. 애니메이션이 매끄럽고 매력적이라면 사용자가 웹 사이트에서 보내는 시간을 연장할 수 있습니다. 그러나 애니메이션이 부적절하거나 움직임이 고르지 않으면 사용자는 좌절하고 매우 빨리 떠납니다.

웹 애플리케이션 프레임워크 및 애니메이션과 관련하여 개발자가 Vue.js에 대해 좋아하는 한 가지는 Vuejs가 애니메이션을 기본적으로 지원한다는 사실입니다. 타사 라이브러리를 둘러보거나 조사할 필요가 없습니다. Vue.js를 설치하기만 하면 끝입니다!.

이 기사에서는 Vue3의 몇 가지 일반적인 애니메이션 기능을 살펴보겠습니다.

비디오 자습서 - Vue 3에서 친구 목록 UI를 만드는 방법

UI 미리보기

Vue.js는 어떻게 애니메이션을 쉽게 추가할 수 있게 합니까?

기본적으로 Vuejs는 전환 및 애니메이션을 지원합니다. 전환은 애니메이션 시작 상태와 애니메이션 종료 상태가 있고 일종의 모션 알고리즘을 적용하여 시작 상태에서 종료 상태로 전환하는 두 가지 상태 애니메이션을 기반으로 합니다.

모션 알고리즘에 대해 걱정할 필요가 없습니다. 모두 브라우저에서 처리됩니다.

일반적으로 상태는 DOM에서 무언가가 추가되거나 제거될 때 변경됩니다. Vue 3는 DOM에 들어오고 나가는 구성 요소에 대한 후크를 제공합니다. 이는 아래 예와 같이 기본 제공 및 구성 요소 래퍼를 사용하여 수행됩니다.



위의 예에서
"이것은 DOM에서 추가되고 제거될 것입니다"라는 메시지가 있는 태그가 태그를 둘러쌉니다. 또한 속성으로 V-If="show"가 있습니다. 이것은 이 태그를 렌더링할지 여부를 결정할 수 있는 메커니즘입니다. show 값을 false로 변경하면 표시에서 제거됩니다.

래퍼 전환 태그를 자세히 보면 다음과 같이 fade로 설정된 이름 속성도 제공했음을 알 수 있습니다. . 후드 아래에서 전환 구성 요소는 애니메이션을 가능하게 하는 몇 가지 마법을 수행하는 몇 가지 후크를 제공합니다. 이 후크는 enter-leave css 클래스를 추가하며 전환 태그에 지정한 이름 속성이 접두사로 붙습니다. 이 예제에서 동적으로 생성된 클래스는 .fade-enter-active, .fade-leave-active, .fade-enter-from, .fade-leave-to입니다.

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to  {
  opacity: 0;
}

따라서 위의 CSS는 불투명도에 애니메이션을 적용합니다.
DOM에서 추가되거나 제거될 때마다 태그를 지정합니다.

한 단계 더 나아가서 사용하세요.

목록과 같은 항목 그룹에 애니메이션을 적용하여 더 많은 작업을 수행할 수 있습니다. 아래 예를 참조하십시오.


템플릿의 핵심 부분은 목록을 렌더링하기 위한 코드 블록입니다.

<transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item" class="list-item">
      Item: {{ item }}
    </li>
  </transition-group>

우리는 사용하고 있습니다. 우리는 정상적인 교체하고 있습니다
와 함께 . 전환 태그에는 "ul"로 설정한 태그 속성이 있습니다. 이것은 우리가 ul을 렌더링하고 있는지 확인합니다. 또한 이름 속성을 "목록"으로 지정합니다. 이를 알면 아래와 같이 동적으로 생성된 클래스에 대한 애니메이션 스타일 속성을 추가할 수 있습니다.

.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

이렇게 하면 모든 속성에 전환이 적용되지만 불투명도와 y 위치만 애니메이션 처리합니다. 즉, 30px의 y 위치에서 시작한 다음 위치 0으로 이동하고 불투명도 1로 끝날 때 불투명도 0을 적용합니다.

이제 고급 애니메이션을 위해 키 프레임을 사용합니다.

고급 애니메이션을 구현하기 위해 키프레임을 사용하여 시작 상태와 종료 상태 사이에 중간 상태를 적용할 수 있습니다. 아래 예에서는 항목이 튀는 효과를 추가합니다.


따라서 Vue에서 생성한 애니메이션 상태 클래스의 스타일은 다음과 같습니다.
바운스 아웃하기 위해 동일한 애니메이션을 반대로 사용합니다. 그렇기 때문에 .list-leave-active 클래스에 reverse 키워드가 있습니다.

.list-leave-active {
  animation: bounce-in 0.5s reverse;
}

다음은 Vue 3에서 애니메이션에 사용할 수 있는 간단한 기능입니다. 이러한 기술을 사용하여 애니메이션 친구 목록 UI를 만드는 방법을 설명하는 비디오를 참조하십시오.