Vue에서 전환하는 방법

Vue에서 페이지 점프를 구현하는 것은 프런트 엔드 개발의 일반적인 요구 사항 중 하나입니다. 사용자 경험을 향상시키기 위해 페이지 점프 중에 전환 효과를 구현하는 것도 좋은 선택입니다.

Vue는 페이지 전환 효과를 얻을 수 있는 다양한 방법을 제공하며, 이어서 하나씩 소개하겠습니다.

1. Vue animation

Vue 애니메이션은 Vue 컴포넌트에서 전환 효과를 구현하는 데 사용되는 Vue에서 공식적으로 제공하는 API입니다. Vue 애니메이션은 Vue의 전환 메커니즘을 통해 구현되어야 합니다. 전환 메커니즘 후크 기능은 다음과 같이 전환 효과를 제어하는 ​​다양한 방법을 제공합니다.

• before-enter(입력 전): 요소가 변경 사항에 삽입되기 전
• enter (entering) ): 요소가 삽입된 상태(startState)
• after-enter(afterent): 요소 삽입 과정이 완료된 후의 상태(endState)
• enter-cancelled(enter-cancelled): 항목이 취소되면 이 후크가 호출됩니다.

다음은 전환 효과를 얻기 위해 Vue 애니메이션을 사용하는 샘플 코드입니다.

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

이 예에서는 전환 효과를 표시하기 위해 "fade"라는 이름의 애니메이션이 라우터 뷰에 바인딩됩니다. , 새 페이지에 들어가면 그라데이션 효과가 나타나며 시간이 지남에 따라 불투명도가 0에서 1로 점차 증가합니다. 마찬가지로 이전 페이지를 나갈 때도 그라데이션 효과가 있으며 불투명도가 점차 변경됩니다. 일정 시간이 지나면 1에서 0까지.

2. 타사 라이브러리 구현

Vue 전환 효과는 타사 라이브러리를 통해서도 구현할 수 있으며, 그 중 더 널리 사용되는 라이브러리는 다음과 같습니다.

• transition-group: 상호 연결되는 각 구성 요소에 사용됩니다. 상황
• vue-router-transition: 페이지 전환 장면에 사용
• animated-vue: 다양한 장면의 전환 효과에 사용

transition-group

transition-group은 목록 및 그리드 등을 쉽게 구현할 수 있습니다. 애니메이션 전환 효과 구성 요소 사이.

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

이 예에서는 범위 요소가 반복되어 전환 그룹에 추가되며 각 요소에는 키 속성 세트가 있습니다. 그들은 모두 동일한 클래스 이름 목록 항목을 갖습니다. 전환 그룹은 전환 효과를 얻기 위해 이러한 요소를 동적으로 추가하고 제거합니다.

vue-router-transition

vue-router-transition은 Vue Router에서 페이지 전환 효과를 구현하는 데 사용됩니다. vue-router-transition을 사용하려면 Vue Router의 라우팅 구성 요소에 v-enter 및 v-leave의 클래스 이름만 추가하면 됩니다. CSS를 사용하여 이러한 스타일을 정의하여 전환 효과를 얻을 수 있습니다.

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

// fade 动画实现方式同上

이 예에서는 두 페이지가 전환되면 새 페이지가 먼저 숨겨지고 이전 페이지 위에 배치된 다음 CSS 애니메이션을 사용하여 들어오고 나가는 전환 효과를 얻습니다.

animated-vue

animated-vue는 Vue 전환 효과를 구현하는 데 사용되는 또 다른 라이브러리입니다. 이는 페이지 전환을 더욱 풍부하게 만들기 위해 다양한 유형의 애니메이션(입력, 종료, 팝업 상자 등)을 제공합니다.

<transition appear :css="false"
  v-bind:enter-active-class="'animated fadeIn'"
  v-bind:leave-active-class="'animated fadeOut'"
  >
  <router-view></router-view>
</transition>

이 예에서는 여러 가지 CSS 애니메이션을 제공하는 "animated"라는 CSS 라이브러리를 사용하고 있습니다. 이 라이브러리를 Vue의 전환 메커니즘과 함께 사용하여 흥미로운 페이지 전환 효과를 얻을 수 있습니다.

요약

Vue에서 전환 효과를 구현하면 사용자에게 더 나은 경험을 제공할 수 있을 뿐만 아니라 페이지의 상호 작용성과 미적 측면도 향상됩니다. Vue는 전환 효과를 달성하기 위해 다양한 내장 API와 타사 라이브러리를 제공하며 다양한 요구 사항과 시나리오에 따라 선택할 수 있습니다.

위 내용은 Vue에서 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!