트랜지션 클래스 넣기

https://v2.vuejs.org/v2/guide/migration.html?redirect=true#transition-Attribute-replaced

Migration from Vue 1.x — Vue.js

 

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

Vue.js

Transition 태그는 법칙이 있다.

 

      <TransitionGroup name="list" tag="ul">
          <li v-for="(todoItem,i) in propData" v-bind:key="i"
            class="shadow">{{ todoItem.item }}
            <button v-on:click="removeTodo(todoItem, i)" class="removeBtn">
              <i class="removeBtn fas fa-trash-alt"></i>
            </button>
            <button v-on:click="toggleClear(todoItem,i)">clear</button>
            <span v-if="todoItem.completed">good!</span>
          </li>
      </TransitionGroup>

list이기 때문에 Transition-group의 name은 css클래스와 관련이 있고 css클래스는 트랜지션 클래스를 의미한다.

그게 무슨말인가?( tag는 말그대로 html 태그 이다.)

트랜지션 클래스에 붙는 아래의 클래스들을 정의하면

.list-enter-active, .list-leave-active{
  transition : all 1s;
}
.list-enter-from, .list-leave-to{
  opacity: 0;
  transform: translateY(30px);
}

 

네임-enter 로 정의해서 사용할 수 있다는 것이다.