VueJS transition 컴포넌트 배우기, 애니메이션

Last Modified : 2020-05-15 / Created : 2020-05-15

6,093
View Count

주소 복사하기

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 컴포넌트는 이런 부분을 자동으로 구현해주는 장점이 있죠.

주소 복사하기

[VueJS] vue-router 사용하는 방법, 라우트 설정

VueJS 부모 자식 컴포넌트에 props 사용하여 양방향 바인드 방법

해당 카테고리 최신 글