Vue3의 애니메이션 기능: 멋진 애니메이션 효과 구현

Vue3는 Vue의 최신 버전으로, 애니메이션 측면에서도 대폭 개선 및 업데이트되었습니다. Vue3의 애니메이션 기능은 Composition API와 Transition 컴포넌트를 사용하여 구현되므로 개발자는 다양하고 멋진 애니메이션 효과를 보다 쉽게 ​​얻을 수 있습니다.

1. Composition API

Composition API는 Vue3에 도입된 새로운 기능으로 구성 요소의 가독성, 유지 관리성 및 재사용성을 최적화할 수 있습니다. Composition API에서는 ref 및 반응형을 사용하여 반응형 데이터를 생성하고, watchEffect 및 계산을 사용하여 변수 및 계산된 속성의 변경 사항을 모니터링하고, onMounted 및 onUnmounted를 사용하여 수명 주기 후크 기능 등을 실행할 수 있습니다.

애니메이션 측면에서 Composition API는 useAnimation과 useTransition이라는 두 가지 기능을 제공합니다.

1. useAnimation

useAnimation 함수를 사용하면 구성 요소 내부에 애니메이션 기능을 생성하여 복잡한 애니메이션 로직을 처리할 수 있습니다. 기본 구문은 다음과 같습니다.

import { useAnimation } from 'vue';

export default {
  setup() {
    const {animate, stop} = useAnimation();
    
    return {
      animate,
      stop
    }
  }
}

useAnimation에서 반환된 함수를 사용하여 일련의 애니메이션 키프레임을 만든 다음 애니메이션 함수를 통해 이러한 애니메이션을 실행할 수 있습니다. 예를 들어 다음과 같이 확대/축소 애니메이션을 만들 수 있습니다.

const { animate, stop } = useAnimation();
  
const scale = animate({
  0: {
    transform: 'scale(1)',
  },
  0.5: {
    transform: 'scale(1.2)',
  },
  1: {
    transform: 'scale(1)',
  },
}, {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
});

이 예에서는 애니메이션 기능을 사용하여 키프레임의 변형 속성을 지정하여 요소를 확대 및 축소할 수 있습니다. animate 함수의 두 번째 매개 변수에서는 애니메이션의 지속 시간, 여유 기능, 반복 횟수, 재생 방향을 설정할 수 있습니다. 이러한 방식으로 Vue 구성 요소에서 확대/축소 애니메이션 효과를 구현할 수 있습니다.

2. useTransition

useTransition 함수를 사용하면 요소가 들어오거나 나갈 때 일부 전환 애니메이션 작업을 수행할 수 있습니다. 기본 구문은 다음과 같습니다.

import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    return {
      enter,
      leave
    }
  }
}

Enter 및 Leave 기능을 사용하여 요소의 시작 및 종료 동작에 대해 다양한 애니메이션 전환 효과를 설정할 수 있습니다. 예를 들어 다음 예에서는 페이드 인 및 페이드를 설정합니다. 요소에 대한 아웃 효과:

<template>
  <div :class="{'opacity-0': !show}" v-enter="fadeIn" v-leave="fadeOut"></div>
</template>

<script>
import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    const fadeIn = enter((el, done) => {
      el.style.opacity = '0';
      setTimeout(() => {
        el.style.opacity = '1';
        done();
      }, 1000)
    });

    const fadeOut = leave((el, done) => {
      el.style.opacity = '1';
      setTimeout(() => {
        el.style.opacity = '0';
        done();
      }, 1000)
    });

    return {
      fadeIn,
      fadeOut,
      show: true
    }
  }
}
</script>

이 예에서는 요소가 들어오고 나갈 때 각각 fadeIn 및 fadeOut 함수를 실행하고, 다양한 콜백 함수를 전달하여 페이드 인 및 페이드 아웃 전환 효과를 실행합니다. 콜백 함수에서는 setTimeout 함수를 사용하여 애니메이션 실행을 지연시키고 done 매개변수를 사용하여 애니메이션 완료 여부를 식별함으로써 애니메이션의 전환 효과를 얻을 수 있습니다.

2. 전환 구성 요소

Composition API에서 제공하는 애니메이션 기능 외에도 Vue3은 페이드 인 및 페이드 아웃, 왼쪽 슬라이드, 위로 슬라이드, 회전 등 기본 구문은 다음과 같습니다.

<transition name="fade">
  <div v-if="show">HELLO VUE3</div>
</transition>

Transition 구성 요소에서는 페이드, 슬라이드 왼쪽, 슬라이드 업, 회전 등과 같은 다양한 전환 애니메이션 효과를 사용하기 위해 다양한 이름 값을 지정할 수 있습니다. Vue3에서는 기본적으로 많은 전환 효과가 제공되며, 이름 값을 설정하여 얻을 수 있습니다. 예를 들어 다음 예제를 통해 간단한 페이드 인 및 페이드 아웃 애니메이션 효과를 구현할 수 있습니다.

<template>
  <div>
    <button @click="show = !show">Show/Hide</button>
    <hr>
    <transition name="fade">
      <p v-if="show">Hello Vue3</p>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

이 예제에서는 이름을 fade로 설정하고 동적으로 변경하여 페이드 인 및 페이드 아웃 효과를 얻습니다. show 값은 요소의 표시 및 숨기기를 제어합니다. 애니메이션 효과에서는 CSS3의 전환 속성을 사용하여 전환의 애니메이션 효과를 설정하고, .fade-enter-active 및 .fade-leave-active를 통해 애니메이션 지속 시간 및 여유 기능을 설정하고, 애니메이션 지속 시간 및 완화 기능을 설정할 수 있습니다. .fade-enter 및 .fade -leave-to를 통한 완화 기능은 애니메이션이 시작되고 끝나는 시점의 상태를 설정합니다.

요약:

Vue3에서 애니메이션 기능과 전환 구성 요소는 애니메이션 효과를 얻는 두 가지 일반적인 방법입니다. 전자는 더 유연하고 자유롭고 더 복잡한 애니메이션 논리를 처리할 수 있습니다. 후자는 더 간단하고 사용하기 쉬우며 일부 기본 전환 애니메이션 효과에 적합합니다. 어떤 방법을 사용하든 CSS3 속성과 기능을 사용하여 다양하고 멋진 애니메이션 효과를 얻고 애플리케이션에 생동감 있는 색상을 추가할 수 있습니다.

위 내용은 Vue3의 애니메이션 기능: 멋진 애니메이션 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!