57. Fine-tuning Transitions

링크open in new window

npm create vue@latest

프로젝트 링크

이 강의에서는 Vue에서 전환(Transitions)을 구성하는 방법을 배우게 됩니다. 요약하면 다음과 같습니다:

전환 시간 설정: Vue는 CSS 스타일로 설정된 전환의 지속 시간을 자동으로 감지합니다.
transition 속성을 사용하여 애니메이션의 지속 시간을 지정할 수 있습니다.
<transition> 컴포넌트의 duration 속성: 전환 지속 시간을 명시적으로 설정하려면 <transition> 컴포넌트의 duration 속성을 사용할 수 있습니다.
이 값은 밀리초 단위로 설정됩니다.
v-show 지시어 사용: v-if뿐만 아니라 v-show 지시어와 함께 전환을 적용할 수도 있습니다.
다중 루트 요소의 전환: 하나의 <transition> 컴포넌트 내에서 여러 요소에 대한 전환을 처리할 수 있습니다.
이를 위해 v-if와 v-else 지시어를 사용하고 각 요소에 고유한 key 속성을 부여합니다.
전환 순서 변경: 전환의 순서를 변경하려면 <transition> 컴포넌트의 mode 속성을 사용합니다. 기본값은 in-out이며, out-in으로 설정하면 문서를 떠나는 요소가 먼저 애니메이션되고, 그 후에 들어오는 요소가 애니메이션됩니다.

이 강의를 통해 Vue에서 CSS 전환을 사용하여 애니메이션을 구현하는 방법을 배웠으며, <transition> 컴포넌트를 사용하여 다양한 전환 효과를 적용하는 방법을 익혔습니다.
이러한 방법은 애플리케이션의 사용자 인터페이스를 개선하는데 유용하게 활용될 수 있습니다.

App.vue

<script setup lang="ts">
  import {ref} from "vue";

  const flag = ref(false)
</script>

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <Transition name="fade" mode="out-in">
    <h2 v-if="flag" key="main">Hello World!</h2>
    <h2 v-else key="secondary">Another Hello!</h2>
  </Transition>
</template>

<style>
  .fade-enter-from {
    opacity: 0;
  }

  .fade-enter-active {
    transition: all 0.25s linear;
  }

  .fade-leave-to {
    transition: all 0.25s linear;
    opacity: 0;
  }
</style>

# 57. Fine-tuning Transitions

57. Fine-tuning Transitions