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
네. 도움이 되었어요
아니요. 별로에요