[Vue.js] 빌트인 컴포넌트 - transition

 

Vue의 Built-In Components

 

◽ <transition>

애니메이션 처리에 필요한 빌트인 컴포넌트이다.진입 전, 벗어나기 전, 진입했을 때 등등의 타이밍을 설정하여 맞는 CSS나 Javascript 훅을 사용하여 표현할 수 있다.

 

 

◽ <transition>의 사용

아래는 커스텀 모달을 띄웠을 때 모달 뒤를 dim 처리하기위한 <transition>이다.

v-show로 출력되거나 사라질 때 css가 적용된다.

 

📄 HTML

<transition name="modal-fade">
	<div class="cover" v-show="visible" @click="close" />
</transition>

 

📄 CSS

/* dim의 css */
.cover {
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

/* 출력되기 전, 사라지기 전에 적용할 CSS */
.modal-fade-enter-active,
.modal-fade-leave-active {
  @include vendorPrefix('transition', all 0.3s ease-out);
}

/* 출력된 후, 사라진 후에 적용할 CSS */
.modal-fade-enter,
.modal-fade-leave-to {
  opacity: 0;
  @include vendorPrefix('transition', all 0.3s ease-in);
}

 

💡 꼭 읽어볼 것

[Vue.js] 뷰 트랜지션(transition)의 사용 방법과 치명적인 문제점

 

 

 

출처

API — Vue.js

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.