[VUE] 엘리먼트 간 transition

HM 프로젝트 작업중...

 

 

한 페이지에서 엘리먼트 페이지 전환 효과를 멋있게 주고 싶었다.

 

v-if / v-else를 사용해서 엘리먼트 사이를 트랜지션 할 수 있다.

 

v-if 이기 때문에 트랜지션 내에 엘리먼트가 한개이니까 트랜지션이 자연스럽겠지? 생각을 하고 아래와 같이 작업을 했다.

그랬더니 조건에 따라 v-if를 변경할때마다 트랜지션이 뚝뚝 끊기고 이상했다.

 

<template>
    <div>
        <transition name="test-change" appear mode="out-in">
        
          <div v-if="test1">
              ...
          </div>

           <div v-if="test2">
              ...
          </div>

           <div v-if="test3">
              ...
          </div>
          
        </transition>
    </div>
 </template>

 

 

 

 

 

 

이상하다. 구글링 구글링...@@

 

 

 

 

 

검색을 해보니 Vue 가이드 사이트에 아주 친절하게 이유가 있었다.(멀리 가지 말고 정식 가이드부터 확실하게 보자)

아래와 같이 트랜지션 내에 v-if로 엘리먼트 변경을 할 때는 :key 값을 같이 넣어줘야 한다.

 

<template>
    <div>
        <transition name="test-change" appear mode="out-in">
        
          <div v-if="test1" key="test1">
              ...
          </div>

           <div v-if="test2" key="test2">
              ...
          </div>

           <div v-if="test3" key="test3">
              ...
          </div>
          
        </transition>
    </div>
 </template>

 

 

 

 

 

 

 

 

 

 

Vue 가이드 왈..

 

 

 

Vue 에서는 같은 태그 이름을 가진 엘리먼트 사이를 트랜지션할 때,
Vue에 고유한 'key' 속성을 부여함으로써 별개의 엘리먼트임을 말해야 한다.
그렇지 않으면 Vue의 컴파일러는 효율성을 위해 엘리먼트의 내용만 바꾼다!

 

 

 

 

 

 

 

 

---

참고 :

 

https://kr.vuejs.org/v2/guide/transitions.html#%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8-%EA%B0%84-%ED%8A%B8%EB%9E%9C%EC%A7%80%EC%85%98