반응형
Transition
-
[Vue.js] Transition & AnimationFront-End(Web)/Vue 2021. 7. 14. 02:24
근래의 웹 어플리케이션은 유저들의 조작에 따라 다양한 인터렉션 효과를 제공한다. Vue는 여기에 사용되는 transition 효과를 좀 더 용이하게 사용할 수 있도록 이라는 태그 컴포넌트 기능을 제공한다. 이번 포스팅에서는, Vue.js 공식문서의 "트랜지션 & 애니메이션" 내용을 기반으로 태그 컴포넌트를 사용하는 방법에 대해 학습해보겠다. 💚 진입/진출 그리고 리스트 트랜지션 0. 컴포넌트 Vue 프론트화면 개발에는 많은 애니메이션이 적용된다. 이 때, 보편적으로 사용되는 방법이 CSS를 통한 제어일 것이다. (transform 을 통한 변형, class를 동적으로 부여하여 제어한다. 이를, transition 설정을 통해 유하게 구현할 수 있다.) Vue.js 에서는 CSS transition을 더 ..