[Vue3] Transition 컴포넌트

<Transition> 컴포넌트는 빌트인 컴포넌트이므로 등록하지 않고도 템플릿 내에서 사용 가능하다.

• 컴포넌트 애니메이션은 아래 조건 중 하나라도 충족하면 발생한다.
  • v-if를 통한 조건부 렌더링
  • v-show를 통한 조건부 표시
  • <component>를 통해 전환되는 동적 컴포넌트

<template>
  <button @click="show = !show">토글</button>
  <Transition>
    <p v-if="show">안녕</p>
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

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

• 트랜지션명이 name prop으로 지정된 경우, 트랜지션 클래스에는 v 대신 이름이 접두사로 붙는다.
  • e.g. v-enter-active -> fade-enter-active

<template>
  <Transition name="fade">
    ...
  </Transition>
</template>

<script>
  // ...
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

• 자바스크립트 훅을 통해 <Transition> 컴포넌트의 이벤트를 수신하여 프로세스에 연결할 수 있다.
  • onBeforeEnter : 엘리먼트가 DOM에 삽입되기 전에 호출
  • onEnter : 엘리먼트가 DOM에 삽입되고 1 프레임 후 호출
    • CSS와 함께 사용되는 경우 선택적으로 트랜지션 종료를 나타내기 위해 done 콜백을 호출
  • onAfterEnter, onEnterCancelled : 진입 트랜지션이 완료되면 호출
  • onBeforeLeave : onLeave 훅 전에 호출
  • onLeave : 진출 트랜지션이 시작될 때 호출, 진출 애니메이션을 시작하는데 사용된다.
    • CSS와 함께 사용되는 경우 선택적으로 트랜지션 종료를 나타내기 위해 done 콜백을 호출
  • onAfterLeave : 진출 트랜지션이 완료되고, 엘리먼트가 DOM에서 제거된 후 호출
  • onLeaveCancelled : v-show 트랜지션에서만 사용 가능하다.

<template>
  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @enter-cancelled="onEnterCancelled"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
    @after-leave="onAfterLeave"
    @leave-cancelled="onLeaveCancelled"
  >
    <!-- ... -->
  </Transition>
</template>

<script>
export default {
  methods: {
    onBeforeEnter(el) {},
    onEnter(el, done) {
      done()
    },
    onAfterEnter(el) {},
    onEnterCancelled(el) {},
    onBeforeLeave(el) {},
    onLeave(el, done) {
      done()
    },
    onAfterLeave(el) {},
    onLeaveCancelled(el) {}
  }
}
</script>

💡 JavaScript 전용 트랜지션을 사용할 때 :css="false" prop을 추가하는 것이 좋다.
(Vue가 CSS 트랜지션을 자동으로 감지하는 것을 건너뛰도록 지시, CSS 규칙이 실수로 트랜지션을 방해하는 것 방지)

<template>
  <Transition
    ...
    :css="false"
  >
    ...
  </Transition>
</template>