단일 엘리먼트/ 컴포넌트 트랜지션

vue 는 <transition> 컴포넌트를 제공하므로 다음과 같은 상황에서 모든 엘리먼트 또는 컴포넌트에 대한 enter/leave transition을 추가 할수 있다.

• 조건부 렌더링(v-if)
• 조건부 출력(v-show)
• 동적 컴포넌트
• 컴포넌트 root node

🖥 코드보기

1. vue 는 대상 엘리먼트에 css트랜지션 또는 애니메이션이 적용되었는지 여부를 자동으로 감지한다. 그렇다면 css트랜지션 클래스가 적절한 타이밍에 추가/ 제거 된다.
2. 트랜지션 컴포넌트가 javascript 훅을 제공 하면 이러한 훅은 적절한 타이밍에 호출된다.

transition class

enter

1. v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거

2. v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용. 트랜지션 / 애니메이션이 완료되면 제거됩니다.

3. v-enter-to: 진입 상태의 끝에서 실행. 엘리먼트가 삽입된 후 (동시에 v-enter가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가.

leave

1. v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거.

2. v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거.

3. v-leave-to: 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.
   

여기서 v- 는 <transition>에 name을 따로 지정해 주지 않았을 경우 사용 하는 것이다. 만약 <transition name="fade"> 이면 fade-enter이런식으로 사용해주면 된다.

css transition

🖥 코드보기

css animation

transiton과 다른 점은 enter된 직후에 v-enter가 제거 되지 않지만 animationend 이벤트에 있다

🖥 코드보기

사용자 지정 transition class

사용자 정의 트랜지션 클래스를 지정할 수도 있다.

• enter-class
• enter-active-class
• enter-to-class
• leave-class
• leave-active-class
• leave-to-class

transition 지속시간

<transition :duration="1000">...</transition>

enter/ leave 기간에도 명시적인 값을 지정할 수 있다.

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript hook

속성에서 JavaScript hook을 정의 할수 있다.

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

methods: {
// enter
  beforeEnter: function (el) {},
    
  // done 콜백은 CSS와 함께 사용할 때 선택 사항입니다.
  enter: function (el, done) {
    // ...
    done()
  },
    
  afterEnter: function (el) {},
    
  enterCancelled: function (el) {},

//leave
  beforeLeave: function (el) {},
    
  // done 콜백은 CSS와 함께 사용할 때 선택 사항입니다.
  leave: function (el, done) {
    // ...
    done()
  },
    
  afterLeave: function (el) {},
    
  // leaveCancelled은 v-show와 함께 사용됩니다.
  leaveCancelled: function (el) {}
}

이러한 훅은 css transition/animation 또는 자체적으로 사용할수 있다.

JavaScript 전용 트랜지션을 하는 경우 enter 및 leave 훅에서 done 콜백이 필요. 그렇지 않으면 동기적으로 호출되고 트랜지션 즉시 완료된다.

최초 렌더링시 트랜지션

노드 초기 렌더에 transition을 적용하고 싶다면 appear 키워드 속성을 추가 할수 있다.

<transition appear>...</transition>

기본적으로 enter/leave에 지정된 transition을 사용한다. 그러나 원하는 경우 사용자 정의 css클래스를 지정할 수도 있다.

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

사용자 정의 JavaScript 훅

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

엘리먼트 간 트랜지션

v-if/v-else 를 사용하여 원본 엘리먼트 사이를 transition 할수 있다. 가장 일반적인 두 엘리먼트 transiton중 하나는 목록 컨테이너와 빈 목록을 설명하는 메시지 사이에서 작용한다.

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

하지만 태그이름이 같을때 key속성을 부여해줘야 한다.

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

key속성 대신 다음과 같이 작성할수도 있다.

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

transition mode

• in-out : 새로운 엘리먼트가 transition되고 완료되면 현재 엘리먼트가 transition된다.

• out-in : 현재 엘리먼트가 먼저 transition되고, 완료되면 새로운 요소가 바뀐다.

컴포넌트간 트랜지션

동적컴포넌트를 래핑하면된다.

<transition name="component-fade" mode="out-in">
  <component :is="view"></component>
</transition>

data(){
  return{
    view:'v-a'
  }
},
components:{
  'v-a':{
    template: '<div>Component A</div>'
  },
  'v-b':{
    template: '<div>Component B</div>'
  }
}

.component-fade-enter-active, 
.component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, 
.component-fade-leave-to {
  opacity: 0;
}

리스트 트랜지션

v-for을 사용하여 동시에 렌더링 하고자 하는 항목의 전체목록이 있는 경우에는 <transition-group> 컴포넌트를 사용한다.

리스트의 enter/leave

<transition> 과 달리, 실제 요소인<span>을 렌더링합니다. tag 속성으로 렌더링 된 요소를 변경할 수 있다.

<div id="list-demo">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" :key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

---

출처

https://kr.vuejs.org/v2/guide/transitions.html