[vue3] 등장/퇴장 애니메이션 <transition>

CSS로 애니메이션 주려면

1. 시작전 class명

2. 애니메이션 끝난 후 class명

3. 그리고 원할 때 2번 class명 부착

<div class="start end"></div>

 

class명 오브젝트 형태로 넣을 수 있다

 <transition name="fade" class="start" :class="{ end : isOpen }">

vue의 <transition> 태그 활용

  <transition name="fade" class="start" :class="{ end : isOpen }"> 
    <!-- 해석 ==>  isOpen 가 true가되면 모달창 부착 -->
    <Modal @closeModal="isOpen = false" :rooms ="rooms" :selected="selected" :isOpen="isOpen"/>
  </transition>

클래스명을 조건부로 넣을려면 오브젝트 형식으로 작성

{ 클래스명 : 조건 }

 

.start {
  opacity: 0;
  transition: all 1s; 
}

.end {
  opacity: 2;
}

vue에서는 <transtion> 이용하면 위 에 CSS코드를 애니메이션 쉽게 줄 수 있음 

• 등장 애니메이션

1. 애니메이션 주고 싶은 요소를 <transition name="작명">으로 감싸기
2. class명 3개 CSS 작성

.작명-enter-from {시작스타일}
.작명-enter-active {transition}
.작명-enter-to {끝날때 스타일}

ex

.fade-enter-from {
  opacity: 0;
} /* 시작시 스타일 */ 
.fade-enter-active {
  transition: all 1s; 
}
.fade-enter-to {
  opacity: 2;
} /* 끝날을시 스타일 */

• 퇴장 애니메이션

.작명-leave-from {시작스타일}
.작명-leave-active {transition}
.작명-leave-to {끝날때 스타일}