[Vue] Vue의 기초(7) - UI 애니메이션 <transition>

 UI 애니메이션 <transition>

 

애니메이션 시작 전 class(start)를 디자인하고 동작 후 class(end)를 디자인한다. 그리고 원할 때 애니메이션 동작 후 class를 부착한다. 시작 전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다.

 

CSS

<template>
  <div class="start" :class="{ end : modal }">
  <Modal @closeModal="modal = false;" :oneroom="oneroom" :clicked="clicked" :modal="modal" />
  </div>
</template>

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

먼저 애니메이션 주고싶은 요소를 <transition name="작명">으로 감싼다.

.작명-enter-from{시작스타일} .작명-enter-active{transition} .작명-enter-to{끝날때스타일}로 3개를 작성한다.

 

<transition> 태그 이용

<template>

  <transition name="fade">
    <Modal @closeModal="modal = false;" :oneroom="oneroom" :clicked="clicked" :modal="modal" />
  </transition>

</template>


<style>

.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 1s;
}

.fade-enter-to {
  opacity: 1;
}

</style>

.fade-enter-from {
  transform: translateY(-150px);
}
.fade-enter-active {
  transition: all 0.3s;
}
.fade-enter-to {
  transform: translateY(0px);
}

 

 동적 UI

 

먼저, UI 현재 상태를 데이터로 만든다. (0일때, 1일때, 2일때.. 이런식으로 화면이 다르게 나오게)

<script>
export default {
  name: 'App',
  data(){
    return {
      step: 0,
    }
  },
}
</script>

상태에 따라 HTML이 어떻게 보일지 정한다.

<template>
 <div v-if="step==0">내용0</div>
 <div v-if="step==1">내용1</div>
 <div v-if="step==2">내용2</div>
 <button @click="step = 0">버튼0</button>
 <button @click="step = 1">버튼1</button>
 <button @click="step = 2">버튼2</button>
</template>