VueJS를 사용하여 CSS 트랜지션(CSS Transition) 효과를 사용할 수 있는 transition 컴포넌트에 대하여 알아보려고합니다.



# Vue transition 컴포넌트란?
프론트 화면을 개발할 때 애니메이션 효과를 많이 사용합니다. 이 경우 가장 많이 사용되는 방법이 바로 CSS를 사용한 방법으로 transition 스타일 속성을 사용하면 설정된 지연시간 만큼 트랜지션 효과를 구현하는 것이 가능합니다. 이를 사용해 여러가지 애니메이션 효과도 만들 수 있죠.


VueJS에서는 CSS transition 효과를 더 빠르고 간단하게 구현할 수 있도록 transition 컴포넌트(태그)를 제공합니다. 아래와 같이 컴포넌트를 어플리케이션에 빠르게 추가해 사용할 수 있죠.

<transition></transition>



transition을 사용하면 하위에 위치한 엘리먼트 요소에 트랜지션 효과가 추가됩니다. CSS를 잘 모르더라도 쉽고 빠르게 구현할 수 있다는 장점이 있습니다. 다음으로 간단한 사용 방법을 알아봅니다.

@ 중요
트랜지션 컴포넌트가 아닌 트랜지션의 바로 하위 태그 요소에 적용된다는 점을 꼭 알아야합니다. 만약 transition 컴포넌트에 직접 사용할 경우 효과가 나타나지 않게됩니다.


! transition 사용하는 방법 및 예제
transition을 사용하려면 미리 약속된 예약어를 통해서 효과가 사용되는데 그 방법이 매우 간단합니다. 기본적으로 transition에 사용되는 name 속성과 접미어를 추가하여 조작하는 것이 가능합니다. 먼저, 아래의 태그를 보세요.
<transition name="fade">
  <span>Hello Transition !!</span>
</transition>

위에 보시면 name에 fadeInOut을 사용하였습니다. 여기서 name은 선택자 역할을 합니다.

name 속성 // 선택자로서 원하는 transition 컴포넌트를 선택


이처럼 name은 선택자로 사용되어 css 스타일에 선언하게 됩니다.


! vue transition 컴포넌트의 사용하기
아래에서는 fade란 이름을 name의 값을 설정했습니다. 이제 선택자 fade를 사용해 아래처럼 css를 선언할 수 있습니다.
.fade-enter // 컴포넌트 실행될 때
.fade-enter-active // 컴포넌트 실행부터 종료 시점까지
.fade-enter-to // 컴포넌트의 실행이 종료되는 시점

.fade-leave // 컴포넌트 해제될 때
.fade-leave-active // 컴포넌트가 해제되기 시작부터 종료까지
.fade-leave-to // 컴포넌트의 해제가 종료된 시점

보시면 name의 값 fade 앞에 구둣점(.)기호를 사용하여 선언하였습니다. 그리고 바로 뒤에 -enter 또는 -leave를 사용한 것이 보입니다. 바로 VueJS의 라이프사이클과 거의 동일하게 동작하는 것을 알 수 있습니다.

enter는 컴포넌트가 실행될때 동작하게 될 것이고 leave는 반대로 컴포넌트의 해제 단계에 실행되게 됩니다.


# vue transition 컴포넌트 예제보기
이제 대략적으로 어떻게 동작하는지는 앞에서 알아봤습니다. 아래에는 간단한 예제를 만들어고자 합니다.

아래 코드를 봐주세요. 버튼을 하나 만들고 버튼을 클릭하면 'Hello World'라는 문구를 보여주거나 숨길 수 있도록 toggle 기능을 추가하였습니다.
<div id="transitionTest">
  <transition name="fade">
    <h2 v-if="isActive">Hello World !</h2>
  </transition>
  <button @click="isActive = !isActive">Toggle</button>
</div>

<script>
new Vue({
  el: '#transitionTest',
  data: {
    isActive: false
  },
})
</script>

이제 컴포넌트가 처음 fade 효과를 위해 opacity를 아래와 같이 설정하여 fade 효과를 만들 수 있습니다.
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

아주 간단한 예제를 만들어봤습니다. 이처럼 transition 컴포넌트를 사용하면 다양한 애니메이션 효과를 vue 컴포넌트의 라이프사이클과 동시에 동작하도록 만들 수 있을 것입니다.


! 참고. css의 transition과 transition 컴포넌트 사용의 차이점은?
css의 transition은 컴포넌트 라이프사이클과 동시에 동작할 수 없습니다. 예를들어 v-if를 사용한 경우 바로 사라지기 때문에 transition을 사용한 fadeOut 등을 구현하기 위해서는 별도의 타이머 함수가 필요할 것입니다. 하지만 transition 컴포넌트는 이런 부분을 자동으로 구현해주는 장점이 있죠.