VueJS를 사용하여 CSS 트랜지션(CSS Transition) 효과를 사용할 수 있는 transition 컴포넌트에 대하여 알아보려고합니다.
# Vue transition 컴포넌트란?
프론트 화면을 개발할 때 애니메이션 효과를 많이 사용합니다. 이 경우 가장 많이 사용되는 방법이 바로 CSS를 사용한 방법으로 transition 스타일 속성을 사용하면 설정된 지연시간 만큼 트랜지션 효과를 구현하는 것이 가능합니다. 이를 사용해 여러가지 애니메이션 효과도 만들 수 있죠.
VueJS에서는 CSS transition 효과를 더 빠르고 간단하게 구현할 수 있도록 transition 컴포넌트(태그)를 제공합니다. 아래와 같이 컴포넌트를 어플리케이션에 빠르게 추가해 사용할 수 있죠.
<transition></transition>
transition을 사용하면 하위에 위치한 엘리먼트 요소에 트랜지션 효과가 추가됩니다. CSS를 잘 모르더라도 쉽고 빠르게 구현할 수 있다는 장점이 있습니다. 다음으로 간단한 사용 방법을 알아봅니다.
@ 중요
트랜지션 컴포넌트가 아닌 트랜지션의 바로 하위 태그 요소에 적용된다는 점을 꼭 알아야합니다. 만약 transition 컴포넌트에 직접 사용할 경우 효과가 나타나지 않게됩니다.
! transition 사용하는 방법 및 예제
transition을 사용하려면 미리 약속된 예약어를 통해서 효과가 사용되는데 그 방법이 매우 간단합니다. 기본적으로 transition에 사용되는 name 속성과 접미어를 추가하여 조작하는 것이 가능합니다. 먼저, 아래의 태그를 보세요.
위에 보시면 name에 fadeInOut을 사용하였습니다. 여기서 name은 선택자 역할을 합니다.
name 속성 // 선택자로서 원하는 transition 컴포넌트를 선택
이처럼 name은 선택자로 사용되어 css 스타일에 선언하게 됩니다.
! vue transition 컴포넌트의 사용하기
아래에서는 fade란 이름을 name의 값을 설정했습니다. 이제 선택자 fade를 사용해 아래처럼 css를 선언할 수 있습니다.
보시면 name의 값 fade 앞에 구둣점(.)기호를 사용하여 선언하였습니다. 그리고 바로 뒤에 -enter 또는 -leave를 사용한 것이 보입니다. 바로 VueJS의 라이프사이클과 거의 동일하게 동작하는 것을 알 수 있습니다.
enter는 컴포넌트가 실행될때 동작하게 될 것이고 leave는 반대로 컴포넌트의 해제 단계에 실행되게 됩니다.
# vue transition 컴포넌트 예제보기
이제 대략적으로 어떻게 동작하는지는 앞에서 알아봤습니다. 아래에는 간단한 예제를 만들어고자 합니다.
아래 코드를 봐주세요. 버튼을 하나 만들고 버튼을 클릭하면 'Hello World'라는 문구를 보여주거나 숨길 수 있도록 toggle 기능을 추가하였습니다.
이제 컴포넌트가 처음 fade 효과를 위해 opacity를 아래와 같이 설정하여 fade 효과를 만들 수 있습니다.
아주 간단한 예제를 만들어봤습니다. 이처럼 transition 컴포넌트를 사용하면 다양한 애니메이션 효과를 vue 컴포넌트의 라이프사이클과 동시에 동작하도록 만들 수 있을 것입니다.
! 참고. css의 transition과 transition 컴포넌트 사용의 차이점은?
css의 transition은 컴포넌트 라이프사이클과 동시에 동작할 수 없습니다. 예를들어 v-if를 사용한 경우 바로 사라지기 때문에 transition을 사용한 fadeOut 등을 구현하기 위해서는 별도의 타이머 함수가 필요할 것입니다. 하지만 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>
<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 // 컴포넌트의 해제가 종료된 시점
.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>
<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;
}
.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 컴포넌트는 이런 부분을 자동으로 구현해주는 장점이 있죠.
Author ByEnSSo