[Udemy Vue 완벽가이드 Section14] 196. Vue로 CSS 애니메이션 재생하기

App.vue에서 새로운 div를 추가해보자.

'container'라는 class도 추가하고, button태그로 버튼을 만들어보자.

button 위에 p태그로 문단을 하나 추가하여 'This is only sometimes visible...'을 적고, 이 p태그는 아래 button을 클릭했을 때 토글, 즉 열려야한다.

<div class="container">
  <p>This is only sometimes visible...</p>
  <button>Toggle Paragraph</button>
</div>

 

 

새 data 프로퍼티로 paralsVisible를 추가하고, 초깃값을 false로 설정한다.

methods에 새로운 메서드, toggleParagraph를 추가하고 이 메서드를 통해 paralsVisible 프로퍼티를 제어해보자.

this.paralsVisible를 현재 값과 반대로 설정하고 paralsVisible에 v-if를 넣어 일부 경에우만 해당 문단을 표시한다.

이러면 'Toggle Paragraph'버튼을 클릭했을 때 해당 문단이 나타나고 사라진다.

<!--App.vue-->
<template>
  <!--생략-->
  <div class="container">
    <p v-if="paralsVisible">This is only sometimes visible...</p>
    <button @click="toggleParagraph">Toggle Paragraph</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paralsVisible: false,
    };
  },
  methods: {
    toggleParagraph() {
      this.paralsVisible = !this.paralsVisible;
    },
    //생략
  },
};
</script>

 

 

두 동작 모두에 Vue를 통해 애니메이션을 적용시켜 보자.

Vue를 통해 요소가 나타나고 사라지는 동작의 애니메이션을 제어할 수 있도록 해당 요소에 wrapping하는 내장 컴포넌트가 있다.

→ transition 컴포넌트

애니메이션이 필요한 요소를 이 transition 컴포넌트로 wrapping하는데, 하나의 Vue 컴포넌트나 Vue앱에서도 여러 요소를 래핑할 수도 있다.

<div class="container">
  <transition>
    <p v-if="paralsVisible">This is only sometimes visible...</p>
  </transition>
  <button @click="toggleParagraph">Toggle Paragraph</button>
</div>

 

 

이 transition 컴포넌트를 통해 래핑된 요소를 조작할 수 있다.

 

 

transition 컴포넌트는 하나의 요소, 즉 하나의 직속 자식만을 갖는다.

나중에 예외경우도 살펴보겠지만, 지금은 단 하나의 직속 자식 요소만을 갖는 점을 알아라.

 

그럼 transition 컴포넌트가 래핑된 요소에 어떤 작업을 하나?

래핑된 요소는 언젠가 마운트되겠지만 시작할 때는 마운트된 상태가 아니다. 화면에 항상 표시되지는 않는다.

 

 

## 요소 추가될 때

- transition 컴포넌트는 이 요소에 CSS 유틸리티 클래스를 추가한다. 

     - enter-from, enter-active, enter-to 클래스를 추가한다.

     1/ 처음에는 enter-from과 enter-active를 동시에 추가

     2/ 이후 enter-from은 없애고 enter-active는 남겨둔다.

     3/ 애니메이션이 끝나면 enter-to를 바로 추가

이때 Vue가 이들 특수 CSS클래스를 분석하여 그 안의 전환 효과와 애니메이션을 찾고 애니메이션이 얼마나 지속되어야 하는지 읽는다.

Vue가 CSS 코드를 분석하여 특수 CSS 클래스 이름으로부터 지속 시간을 찾고 해당 지속 시간만큼 특수 CSS 클래스를 추가해서 해당 요소가 나타나는 시간동안 여러 스타일을 지정할 수 있도록 한다.

물론 요소가 제거될 때도 비슷한 절차를 거친다.

 

 

## 요소 제거될 때

v-if를 통해 조건이 거짓이라고 판단하면 먼저 마운트된 요소가 마운트 해제된다.

이때 Vue가

1/ leave-from과 leave-active 클래스를 동시에 추가하고

2/ leave-from 클래스는 제거한 뒤 leave-to 클래스를 추가

이렇게 하면 요소가 제거될때도 애니메이션을 적용할 수 있다.

 

여기서도 중요한 점이 있다

Vue가, 해당 특수 클래스에 적용한 CSS코드를 분석하고 클래스에 정의한 전환 효과와 애니메이션 지속 시간을 읽어 들인다.

그리고 핵심적으로 해당 지속시간이 끝난 후에야 DOM에서 요소를 제거한다.

Vue를 사용하지 않았을 때와 다른 부분이다.

transition 컴포넌트를 통해 요소가 즉시 추가 및 제거되며, Vue가 자체적으로 추가하고 분석하는 특수 CSS 클래스를 이용해서 애니메이션이 적용된다는 사실과 그 지속시간을 인식하고 애니메이션이 끝났을 때만 해당 요소를 제거한다.

 

이론은 이렇게 살펴봤으니, 이제 실전으로 가보자.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.