Vue transition이란?

Vue.js에서 Transition은 Vue.js 애플리케이션에서 요소가 추가, 업데이트, 제거될 때 애니메이션 효과를 적용하기 위한 기능입니다. 애니메이션을 위해 Vue.js는 CSS transition과 JavaScript animation을 모두 지원합니다.

Transition은 Vue.js에서 제공하는 transition 컴포넌트를 사용하여 구현할 수 있습니다. transition 컴포넌트는 다음과 같은 속성을 가질 수 있습니다.

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

아래는 Vue.js에서 Transition을 사용한 예시입니다.

<template>
  <div>
    <button v-on: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 클래스를 가진 div 요소가 트랜지션과 함께 나타나거나 사라지는 효과가 적용됩니다. transition 컴포넌트를 사용하여 트랜지션을 정의하고, .box 클래스를 가진 요소에 v-if 디렉티브를 사용하여 요소의 추가, 제거를 제어합니다. 트랜지션 효과는 CSS transition으로 구현되며, .fade-enter, .fade-leave-to, .fade-enter-active, .fade-leave-active 클래스를 사용하여 애니메이션을 정의합니다.