10.Transition

• kr.vuejs.org/v2/guide/transitions.html

진입/진출 그리고 리스트 트랜지션 — Vue.js

---

• Transition , Transition Group 태그로 나뉘며 해당 영역은 transition 활성 영역이 된다.
• v-enter -> v-enter-to / v-leave -> v-leave-to 로 이동하면서 선명도가 바뀌는 예시.
• v-enter-to + v-leave | v-leave-to + v-enter 로 자주 사용된다.

---

사용 예시

• 사용할 영역을 <transition> , <transition-group> 으로 정의한다.
• <style> 태그 영역에 해당 범위의 트랜지션 효과를 기술한다.

<template>
<!--   name = 클래스명 tag = HTML 태그 -->
<transition-group name="list" tag="ul">
    <li v-bind:key="index" v-for="(todoItem, index) in propsdata" class="shadow">
      <i v-on:click="toggleComplete(todoItem,index)" v-bind:class="{checkBtnCompleted: todoItem.completed}" class="checkBtn fas fa-check"></i>
      <span v-bind:class="{textCompleted: todoItem.completed}">{{todoItem.item}}</span>
      <span class="removeBtn" v-on:click="removeTodo(todoItem,index)">
        <i class="fas fa-trash"></i>
      </span>
    </li>
  </transition-group>
</template>

...

<style>
/* Transition */
.list-enter-active, .list-leave-active {
  /*지속 시간*/
  transition: all 1s;
}
.list-enter, .list-leave-to {
  /* list-enter + list-leave-to */
  /* 지우거나 추가할 때 y 축으로 30 픽셀 올리면서 선명해지거나 흐려진다.*/
  opacity: 0;
  transform: translateY(30px);
}
</style>