Vue 프로젝트에서 정방향 및 역방향 라우팅 전환 애니메이션 효과를 구현하는 방법은 무엇입니까?

Vue 프로젝트에서 정방향 및 역방향 라우팅 전환 애니메이션 효과를 구현하는 방법은 무엇입니까?

Vue 프로젝트에서는 Vue Router를 사용하여 라우팅을 관리하는 경우가 많습니다. 경로를 전환하면 전환 효과 없이 페이지 전환이 즉시 완료됩니다. 페이지 전환에 애니메이션 효과를 추가하려면 Vue의 전환 시스템을 사용할 수 있습니다.

Vue의 전환 시스템은 요소를 삽입하거나 제거할 때 전환 효과를 추가하는 쉬운 방법을 제공합니다. 이 기능을 사용하여 순방향 및 역방향 라우팅 전환을 애니메이션할 수 있습니다.

먼저 Vue의 전환 구성요소 을 프로젝트에 도입해야 합니다. 루트 컴포넌트에 도입하거나 애니메이션을 추가해야 하는 컴포넌트에 도입할 수 있습니다.

다음으로 태그에서 전환 애니메이션의 스타일을 정의해야 합니다. Vue의 전환 구성 요소에는 다음과 같은 CSS 클래스 이름을 사용합니다.

• enter: 삽입 시 시작 상태, 애니메이션 삽입 직전에 적용됩니다.
• enter-active: 삽입 시 종료 상태, 애니메이션 삽입 시 트리거됩니다. 삽입 애니메이션이 완료될 때까지 한 프레임 이후에 적용
• leave: 삭제 시 시작 상태, 애니메이션 삭제 직전에 적용
• leave-active: 삭제 시 종료 상태, 삭제 애니메이션이 한 프레임 후에 적용 Triggered, Until 삭제 애니메이션 완료

다음은 애니메이션 효과 예시의 코드 예입니다.

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

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

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

위 코드에서는 "fade"라는 전환 효과를 사용하고 "out-in" 모드를 사용합니다. 즉, 경로를 전환할 때 먼저 이전 페이지를 종료한 다음 새 페이지로 들어갑니다.

태그에서는 를 사용하여 현재 경로에 해당하는 구성요소를 표시합니다. 해당 CSS 클래스 이름은 시작 및 종료 시 추가됩니다.

다음으로