[Vue]5. Transition

Vue에서 애니메이션을 주려면 2가지 방법이 있다.

• CSS
• Transition

CSS Transition

주는법

1. 애니메이션 시작 전 class를 디자인하기
2. 애니메이션 동작 후 class를 디자인하기
3. 원할 때 애니메이션 동작 후 class를 부착
4. 시작 전 class명에 transition 속성을 주면 부드럽게 애니메이션이 완성

조건부로 실행하고 싶으면 클래스에 데이터바인딩하면 된다!
:class="{클래스명 : 조건}"

<div :class="{ 클래스명 : true }"> </div>

값이 true 혹의 true 비슷한 자료일 때 클래스 부착된다.

---

Transition

엘리먼트 또는 컴포넌트가 시작하고 끝날때 애니메이션을 적용할 수 있다.

주는법

1. 애니메이션 주고 싶은 UI의 name을 지정한다.
2. 으로 감싼다.
3. CSS로 스타일을 주면 된다.
   

등장

• 작명-enter-from: 진입 시작 상태.
• 작명-enter-active: 진입 활성 상태. 모든 진입 상태에 적용.
  진입 트랜지션에 대한 지속 시간, 딜레이 및 이징(easing) 곡선을 정의하는 데 사용.
• 작명-enter-to: 진입 종료 상태.

퇴장

• 작명-leave-from: 퇴장 시작 상태.
• 작명-leave-active: 퇴장 활성 상태. 모든 퇴장 상태에 적용.
  트랜지션에 대한 지속 시간, 딜레이 및 이징 곡선을 정의하는 데 사용.
• 작명-leave-to: 퇴장 종료 상태.

예시코드

<Transition name="fade">
  <Modol @closeModal="모달창=false" v-bind:원룸="원룸들" :누른거="누른거" :모달창="모달창"/>
</Transition>

/* 시작 */
.fade-enter-from{
  transform: translateY(-1000px);
}
.fade-enter-active{
  transition: all 1s;
}
.fade-enter-to{
  transform: translateY(0px);
}
/* 끝 */
.fade-leave-from{
  opacity: 1;
}
.fade-leave-active{
  transition: all 1s;
}
.fade-leave-to{
  opacity: 0;
}