transition 이란?

transition은 애플리케이션 내에서 요소 추가, 업데이트, 제거될 때 애니메이션 효과를 적용하기 위한 기능
css, javascript transition 을 모두 지원

transition 속성

name: 트랜지션 이름
appear: 초기 렌더링 시에도 트랜지션을 적용할지 여부
appear-class: 초기 렌더링 시 트랜지션을 적용할 때 적용할 클래스
enter-class: 추가될 요소에 적용될 클래스
enter-active-class: 추가될 요소가 애니메이션을 수행하는 동안 적용될 클래스
enter-to-class: 추가될 요소가 애니메이션을 완료한 후 적용될 클래스
leave-class: 제거될 요소에 적용될 클래스
leave-active-class: 제거될 요소가 애니메이션을 수행하는 동안 적용될 클래스
leave-to-class: 제거될 요소가 애니메이션을 완료한 후 적용될 클래스

예시

<template>
  <div>
    <button @click="showBox = !showBox">
      Toggle Box
    </button>
    <transition name="fade">
      <div v-if="showBox" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBox: false
    };
  }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

위 예시의 버튼을 클릭하게 되면 box 라는 className 을 가진 div 엘리먼트가 dom에 추가됐다가 제거되는 기능을 하는데 dom에 추가 또는 삭제 될 때 css transition으로 애니메이션 효과를 준다

transition 클래스

v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거됩니다.
v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용됩니다. 트랜지션 / 애니메이션이 완료되면 제거됩니다.
v-enter-to: 진입 상태의 끝에서 실행됩니다. 엘리먼트가 삽입된 후 (동시에 v-enter가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.
v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거됩니다.
v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거됩니다.
v-leave-to: 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.