[Vue] animation, Transition (class명 조건부로 넣기)

Transition

vue에서는 <Transition>을 이용하면 애니메이션을 쉽게 줄 수 있다.

<Transition name="fade">
	<!-- 애니메이션 주고 싶은 요소 -->
</Transition>

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

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

예제

<template>
  <Transition name="fade">
    <div class="modal_wrap black-bg" v-if="모달창열렸니==1">
      <div class="white-bg">
        <img :src="원룸들[누른거].image" class="room-img">
        <h4>{{ 원룸들[누른거].title }}</h4>
        <p>{{ 원룸들[누른거].content }}</p>
        <div>개월 수 : <input type="text" v-model="month"></div>
        <p>[{{month}}개월 선택] {{ 원룸들[누른거].price * month }}원</p>
        <button @click="closeModal">닫기</button>
      </div>
    </div>
  </Transition>
</template>

.fade-enter-from{opacity:0;}
.fade-enter-active{transition:all .3s;}
.fade-enter-to{opacity:1;}

.fade-leave-from{opacity:1;}
.fade-leave-active{transition:all .3s;}
.fade-leave-to{opacity:0;}

애니메이션 만들 때 vue 문법이 굳이 필요하진 않다. (CSS로 가능)
CSS로 애니메이션을 주려면

1. 시작 전 class 명
2. 애니메이션 끝난 후 class
3. 원할 때 2번의 class 부착

어떤 조건일 때 특정 클래스를 넣고 싶으면
{ 클래스명 : 조건 }

<div class="modal" :class="{ end : true }">

<div class="modal_wrap open black-bg" :class="{ modal_open : 모달창열렸니 }" v-if="모달창열렸니==1">
...
</div>