[Vue] transition 이벤트 (동적 class, Transition 태그)

 

뷰로

서서히 뭔가가 바뀌는 이벤트를 줄 수 있는 방법이 두가지가 있습니다.

 

1. 동적 class 넣기

2. Transition 태그 사용

 

동적 class 넣는거는 정통적인 css 디자인 방법이구요

Transition 태그는 뷰 만의 방법인데

진짜 편해여

 

 

---

 

1. 동적 class 넣기

<template>

  <div class="start" :class="{ end : true }">
    <!-- 모달창 -->
  </div>

</template>

<style>
.start{
  opacity: 0;
  transition: all 1s;
}
.end{
  opacity: 1;
}
</style>

 

css 로 애니메이션을 주는 방법인데

일단 시작과 끝 애니메이션 css 를 만들어놓고

시작 css 는 처음부터 할당,

끝 css 는 원할 때 할당해줍니다.

 

 

 

 

 

 

 

2. Transition 태그 사용

<template>

  <Transition name="fade">
    <!-- 모달창 -->
  </Transition>

</template>

<style>
/* Transition */
/* 열 때 */
.fade-enter-from{
  opacity: 0;
}
.fade-enter-active{
  transition: all 1s;
}
.fade-enter-to{
  opacity: 1;
}
/* 닫을 때 */
.fade-leave-from{
  opacity: 1;
}
.fade-leave-active{
  transition: all 1s;
}
.fade-leave-to{
  opacity: 0;
}
</style>

 

근데 뷰에는 더 쉽게 애니메이션을 구현할 수 있습니다.

 

시작 시 처음: .class명-enter-from

시작 시 transform: .class명-enter-active

시작 시 끝: .class명-enter-to

 

끝날 시 처음: .class명-leave-from

끝날 시 transform: .class명-leave-active

끝날 시 끝: .class명-leave-to