Vue.js UI 애니메이션 (Transition)

 

- CSS 애니메이션 ex)transition

1.일반 CSS사용하는 방식

class명을 줘서 시작과 끝을 정하는 방식이다. 변수를 클래스에 담을 때 :class와같이 사용하여 설정한다.

 

가능한 방법이지만 Transition을 사용하면 더욱 편하다.

<template>
    <!-- true가 될때 .end무착하는거 즉 modal이 불린 자료형 이니까 -->
<div class="start" :class="{ end: modal }"><ModalPopup @closeModal="modal=false" 
v-bind:oneroom="oneroom" 
:roomNumber="roomNumber" :modal="modal"></ModalPopup></div>

</template>



......

<style>

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

......

2.Vue.js제공하는 Transition사용하기

transiton을 사용하고싶은 컴포넌트를 <Transition>으로 감싸주고 name으로 이름을 지어준다.

 

그리고 style부분에서 컴포넌트 시작시, 종료시 2가지 경우가 있다.

 

1)시작시 이름-enter-from, 이름-enter-active, 이름-enter-to 로 3가지 경우로 나눠주고

2)종료시 이름-leave-from, 이름-leave-active, 이름-leave-to 로 나눠서 설정해준다.

<template>



  <div>

    <Transition name="fade">
      <ModalPopup @closeModal="modal=false" 
v-bind:oneroom="oneroom" 
:roomNumber="roomNumber" :modal="modal"></ModalPopup>
    </Transition>
    
    ..........
    
<style>
.fade-enter-from{
  /* opacity: 0; */
  transform: translateY(-1000px);
}
/* 시작시 스타일 */
.fade-enter-active{
  transition: all 1s;
}
.fade-enter-to{
  transform: translateY(0px);

  /* opacity: 1; */
}
/* 끝날시 스타일 */

/* ps.퇴장은 enter를 leave로 바꿔주면 된다. */

.fade-leave-from{
  opacity: 1;
}
/* 시작시 스타일 */
.fade-leave-active{
  transition: all 1s;
}
.fade-leave-to{
  opacity: 0;
}
.....