Vue Animation Tutorial - Vue의 애니메이션 시스템 사용법 배우기

Vue 2는 상태 전환과 함께 입력 및 이탈 애니메이션을 통합하는 기능을 제공합니다. 이 레슨 전반에 걸쳐 Vue 애니메이션을 기본 컨텍스트에서 살펴보고 자체 애니메이션을이 과정에서 수행해 온 프로젝트와 통합 할 것입니다.

Vue에 애니메이션 입력 및 종료

아마도 Vue 애니메이션의 가장 큰 사용 사례는 주어진 요소가 DOM에 들어가고 떠날 때를 기반으로합니다. 이러한 애니메이션이 제대로 수행되면 요소를 즉시 표시하는 대신 UI에 멋진 터치를 추가하십시오.

애니메이션 입력 및 종료를 시연하려면 /src/components/Skills.vue를 열고  템플릿을 다음과 같이 수정하십시오.

    <!-- Other HTML Removed for Brevity -->

    <form @submit.prevent="addSkill">
      <input type="text" placeholder="Enter a skill you have.." v-model="skill" v-validate="'min:5'" name="skill" >

      <!-- Add these 3 lines -->
      <transition name="alert-in">
        <p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
      </transition>


    </form>

    <!-- Other HTML Removed for Brevity -->

여기에서 주목해야 할 중요한 부분은 전환  래퍼 구성 요소입니다. alert-in 과 같은 고유 한 이름을 지정합니다. alert-in 은 CSS 애니메이션 클래스의 이름 접두사로 사용됩니다.

전환  래퍼 내에서 포장되고 있는지에 따라 다음과 같은 경우에 애니메이션을 적용합니다 :

• v-  조건부 렌더링 인 경우
• v-show  조건부 표시
• 동적 구성 요소
• 구성 요소 루트 노드

여기서는 <p class = "alert"...  요소에  이미 v-if 지시어가 적용되어 있습니다.

이 오류 메시지를 애니메이션화  하려면 구성 요소 의 스타일 섹션에 CSS 클래스를 만들어야합니다 .

.alert-in-enter-active {
  animation: bounce-in .5s;
}
.alert-in-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

참고 :  클래스 이름의 시작 부분에 .alert-in 이라는 이름을 사용하는 방법에 유의하십시오 . 이  값 은 <transition name = "... 값 과 일치해야합니다 .

두 번째 주 : 여기에서는 애니메이션을보다 잘 제어 할 수있는 키 프레임 애니메이션을 사용하지만 간단한 애니메이션의 경우 CSS 전환을 대신 사용할 수 있습니다.

브라우저에서 결과를보고 텍스트 입력에 몇 개의 문자를 입력하면 키 프레임 애니메이션을 기반으로 오류 메시지가 애니메이션으로 표시됩니다. 모든 유형을 제거하면 애니메이션이 취소됩니다.

귀하가 처분 할 수있는 전환 수업은 다음과 같습니다 :

• 배
• v-enter-active
• v-enter-to
• V- 떠나기
• v-leave-active
• v-leave-to

Vue와 함께 애니메이션 라이브러리 사용하기

자체 CSS 애니메이션을 작성하고 싶지 않은 경우 타사 애니메이션 라이브러리를 매우 쉽게 사용할 수 있습니다. 

Animate.css 는 UI 애니메이션과 함께 잘 작동하는 인기있는 애니메이션 라이브러리입니다.

다음과 같이 템플리트를 수정하십시오.

      <transition name="alert-in" enter-active-class="animated flipInX" leave-active-class="animated flipOutX">
        <p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
      </transition>

우리가 변경 한 것은 enter-active-class  와 leave-active-class를 추가 한 것 뿐이며 Animate.css가 사용하는 CSS 클래스에 모두 바인딩됩니다.

이제 스타일 섹션에서 Animate.css 라이브러리를 가져와야합니다.

<style scoped>
@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

...

저장해. 그런 다음 애니메이션이 지정된 Animate.css 클래스를 기반으로하고 있음을 알 수 있습니다.

간단 하죠?

목록에 애니메이션 적용

우리 프로젝트에서는 v-for  지시어 를 사용하여 배열을 반복하는 정렬되지 않은 목록이 있습니다. 전환 그룹 구성 요소 래퍼를 사용하여이 목록에 애니메이션을 적용 할 수 있습니다 . 그것은 매우 간단합니다!

다음과 같이 템플리트를 수정하십시오.

<!-- Other HTML removed for brevity -->

      <ul>
        <transition-group name="list" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
          <li v-for="(data, index) in skills" :key='index'>{{data.skill}}</li>
        </transition-group>
      </ul>

참고 :  이 작업을 수행하려면 목록에 색인이 있어야합니다 ( key = 'index') .

저장하고 새 스킬을 추가하면 적용된 Animate.css 클래스를 기반으로 새 목록 항목이 애니메이션으로 표시됩니다.