[Udemy Vue 완벽가이드 Section14] 197. 전환 컴포넌트<transition> 사용하기

wrapping된 문단을 살펴보자.

 

Vue가 특수한 유틸리티 클래스를 추가한다고 했다.

해당 클래스의 스타일을 CSS 코드로 정의해보자.

 

 

# 요소가 추가될 때

Vue가 추가할 클래스의 이름은 기본적으로 v-enter-from, v-enter-active, v-enter-to로 설정되어있다

Vue가 기본적으로 이 세가지 CSS 클래스를 추가하는데 DOM에 요소가 처음 추가됐을 때 차이를 두고 추가한다.

이 경우는 DOM에 해당 문단이 처음 나타났을 때를 의미한다.

이제 각 클래스의 스타일을 지정해보도록 하자.

각기 다른 프로퍼티를 정의해볼텐데 최소한 하나의 전환 효과나 애니메이션이 있어야 Vue가 각 클래스로부터 지속 시간을 읽어들일 수 있다.

지속 시간을 읽어들이는 것 자체가 Vue가 내부적으로 실행하는 핵심 기능이다.

 

## v-enter-from

v-enter-from에서는 시작 상태를 정의한다.

- 이 문단이 처음에는 표시되지 않아야 하니, opacity를 0으로 설정한다.

- 그리고 약간 상단으로 올라가도록 transform: translateY를 -30px로 설정하여 실제 위치보다 약간 위로 움직이도록 설정.

.v-enter-from {
 opacity: 0;
 transform: translateY(-30px);
}

 

## v-enter-to

v-enter-to에서는 마지막 상태를 정의.

- 페이지에서 해당 요소의 원래 실제 위치로 이동시켜보자.

.v-enter-to {
 opacity: 1;
 transform: translateY(0);
}

 

## v-enter-active

v-enter-active에서는 transition이라는 CSS프로퍼티를 추가해서 all로 모든 CSS 프로퍼티에 애니메이션이 필요하다고 알려준다.

opacity와 transform 두 프로퍼티에 지속시간을 정의할 수 있다. 이 지속시간을 Vue가 읽어들인다.

.v-enter-active {
 transition: all 0.3s ease-out;
}

 

 

저장 후, 새로고침 후 'Toggle Paragraph'버튼을 클릭하면 설정한 p가 추가될 때 재생되는 애니메이션을 볼 수 있다.

제거 애니메이션은 아직 없지만 추가할 때는 분명히 적용되어 있다.

 

 

# 요소가 제거될 때

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

enter 클래스와 동일한 개념이다.

 

## v-leave-from

먼저 시작 상태를 설정한다. 지금과 같은 경우에는 enter의 마지막 상태와 동일한데, 다르게 설정해도 괜찮다.

.v-leave-from {
 opacity: 1;
 transform: translateY(0);
}

전혀 다른 상태, 전혀 다른 CSS프로퍼티로 정의해도된다.

v-enter-to와 똑같은 CSS 프로퍼티를 사용할 필요는 없다.

 

 

## v-leave-to

v-leave-to에 v-enter-from와 동일한 상태를 설정하는 대신, 이번에는 아래로 내려보자. -30px대신 +30px로 설정하자.

.v-leave-to {
 opacity: 0;
 transform: translateY(30px);
}

 

## v-leave-active

v-leave-active에도 enter와 동일한 transition을 추가하지만 ease-out eotls, ease-in 함수를 사용하자.

.v-leave-active {
 transition: all 0.3s ease-in;
}

여기서 0.3s는 각 단계마다 지속시간을 제어한다.

 

 

이렇게 저장하고 새로고침하면,

클릭시 문단이 나타날 때와 사라질 때 모두 애니메이션이 적용되어 나온다.

 

 

이렇게 transition 컴포넌트를 사용하여 HTML요소가 나타나고 사라질 때 애니메이션을 적용해보았다.

특히, 제거 시에는 transition 컴포넌트 없이 애니메이션 적용이 어렵다.

물론 추가 시에도 transition 컴포넌트를 이용하면 유연해진다.

 

 

# 요약

- v-if나 v-show를 사용하는 요소를 transition으로 래핑하고 애니메이션을 적용하면 된다.

- v-if나 v-show가 없으면 굳이 transition컴포넌트를 쓰지 않아도 된다.

 

첫번째 예시처럼 block인 경우에는 배운대로 추가 및 제거 시에도 CSS 클래스만 이용하면 된다.

지금처럼 DOM상에 추가 및 제거 될 때는 요소가 사라지기 때문에 transition 컴포넌트의 도움을 받아야한다.

 

 

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