Vue3 쓰시는분들 트랜지션 설정 팁

실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다.

강의내용과는 크게 다른건 없긴합니다.

• https://vuejs.org/guide/built-ins/transition.html#the-transition-component

• https://vuejs.org/examples/#list-transition

TodoList.vue

<template>
  <div>
    <!-- name 은 하단의 css 클래스 transition class 와 연관-->
    <TransitionGroup tag="ul" name="list" class="container">
      <li v-bind:key="todoItem.item" v-for="(todoItem, index) in propsdata" class="shadow">
        <i class="checkBtn fa-solid fa-check" 
              v-bind:class="{checkBtnCompleted: todoItem.completed}"
              v-on:click="toggleComplete(todoItem, index)"></i>
        <span v-bind:class="{textCompleted : todoItem.completed}" >{{ todoItem.item }}  </span> <!--{{ index }}-->
        <span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
          <i class="fa-solid fa-trash"></i>
        </span>
      </li>
    </TransitionGroup>
  </div>
</template>

<style>

/* 기존 css 는 생략, 아래 레퍼런스 css 참고
 https://vuejs.org/examples/#list-transition 
*/

/* 리스트 아이템 트랜지션 효과 */
/* 1. declare transition */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. declare enter from and leave to state */
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 3. ensure leaving items are taken out of layout flow so that moving
      animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
  transition: all 1s;
}

</style>