4개의 매우 멋진 Vue Router 전환 효과를 가지고 오셔서 수집해 보세요!-View.js-php.cn

이 글에서는 매우 멋진 Veu 라우팅 전환 효과 4가지를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

4개의 매우 멋진 Vue Router 전환 효과를 가지고 오셔서 수집해 보세요!

Vue 라우터 전환은 Vue 애플리케이션에 개성을 추가하는 빠르고 쉬운 방법입니다. 이를 통해 애플리케이션의 여러 페이지 간에 부드러운 애니메이션/전환 효과를 추가할 수 있습니다.

올바르게 사용하면 애플리케이션을 더욱 현대적이고 전문적으로 만들어 사용자 경험을 향상시킬 수 있습니다.

오늘 기사에서는 Vue Router를 사용한 전환의 기본 사항을 소개한 다음 몇 가지 기본 예를 소개하여 여러분에게 영감을 드리고자 합니다.

다음은 우리가 만들 4개의 전환 페이지입니다.

4개의 매우 멋진 Vue Router 전환 효과를 가지고 오셔서 수집해 보세요!

프로젝트에 Vue 경로 전환 추가

일반적으로 Vue 라우터 설정은 다음과 같습니다

// default template
<template>
  <router-view />
</template>

로그인 후 복사

이전 버전의 Vue Router에서는 간단히 <transition> code>구성요소 래퍼 <code><router-view>. <transition>组件包装<router-view>。

然而，在Vue Router的新版本中，我们必须使用v-slot来解构我们的 props ，并将它们传递到我们的内部插槽。这个slow包含一个被transition包围的动态组件。

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

로그인 후 복사

每个 Route 都有不同的过渡

默认情况下，用<transition>包装<component>将在我们使用的每条路由上添加相同的过渡。

有两种不同的方法可以为每个路由定制转场。

将过 transition 移到各个组件部分

首先，我们可以将<transition>移到每个单独的组件中，而不是用<transition>组件来包装我们的动态组件。如下：

// app.vue
<template>
  <transition>
    <div class="wrapper">
      <!-- -->
    </div>
  </transition>
</template>

로그인 후 복사

对于我们想要每个路由都有一个过渡效果，通过这种方式，我们可以通过过渡的名称来定制每个路由。

使用 v-bind 的动态过渡

另一种方法是将过渡的名称绑定到一个变量。然后，我们可以根据监听路由动态地改变这个变量。

<transition :name="transitionName">
  <component :is="Component" />
</transition>

로그인 후 복사

watch: {
  &#39;$route&#39; (to, from) {
    const toDepth = to.path.split(&#39;/&#39;).length
    const fromDepth = from.path.split(&#39;/&#39;).length
    this.transitionName = toDepth < fromDepth ? &#39;slide-right&#39; : &#39;slide-left&#39;
  }
}

로그인 후 복사

现在，我们了解了Vue Router Transition 的基础知识，下面我们来看一些 Nice 的示例。

1 – Fade Vue Router Transitions

添渐隐页面过渡可能是我们可以添加到Vue应用程序中最常用的动效之一。

我们可以通过更改元素的opacity 来实现此效果。

首先，我们创建一个带有fade名称的 Vue Router transition。还要注意的另一件事是，我们将过渡模式设置为 out-in。

有三种不同的过渡模式:

default – 进入和离开过渡同时发生
in-out – 新元素的过渡先进入。然后，当前元素过渡出去。
out-in - 当前元素先过渡出去。然后，新元素过渡进来。

为了让新元素平滑地淡入，我们需要在开始新的过渡之前删除当前元素。所以我们使用 mode="out-in"。

<transition>为我们提供了几个CSS类，它们在动画周期中被动态添加/删除。

有6个不同的过渡类（3个用于进入，3个用于离开）。

v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from
그러나 새 버전의 Vue Router에서는 v-slot을 사용하여 props를 분해하고 이를 내부 슬롯에 전달해야 합니다. 이 느린에는 전환으로 둘러싸인 동적 구성요소가 포함되어 있습니다. 🎜
```
// fade styles!
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}


.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
```
로그인 후 복사
로그인 후 복사
각 경로에는 서로 다른 전환이 있습니다. 🎜🎜기본적으로 <transition>로 래핑하면 우리가 사용하는 모든 경로에 동일한 전환을 추가하세요. 🎜🎜각 경로에 대한 전환을 사용자 정의하는 두 가지 방법이 있습니다. 🎜🎜🎜각 컴포넌트 파트로 전환 이동🎜🎜🎜우선 <transition>< /code> 컴포넌트를 사용하는 대신 <transition>을 각 개별 컴포넌트로 이동할 수 있습니다. 동적 구성요소를 래핑합니다. 다음과 같습니다: 🎜// slide transition <router-view v-slot="{ Component }"> <transition name="slide"> <component :is="Component" /> </transition> </router-view> 로그인 후 복사 로그인 후 복사 🎜전환 효과를 적용하려는 각 경로에 대해 이 방법으로 전환 이름으로 각 경로를 사용자 정의할 수 있습니다. 🎜🎜🎜v-bind를 사용한 동적 전환 🎜🎜🎜또 다른 접근 방식은 전환 이름을 변수에 바인딩하는 것입니다. 그런 다음 청취 경로에 따라 이 변수를 동적으로 변경할 수 있습니다. 🎜// component wrapper .wrapper { width: 100%; min-height: 100vh; } 로그인 후 복사 로그인 후 복사 // slide styles! .slide-enter-active, .slide-leave-active { transition: all 0.75s ease-out; } .slide-enter-to { position: absolute; right: 0; } .slide-enter-from { position: absolute; right: -100%; } .slide-leave-to { position: absolute; left: -100%; } .slide-leave-from { position: absolute; left: 0; } 로그인 후 복사 로그인 후 복사 🎜이제 Vue 라우터 전환의 기본 사항을 이해했으므로 몇 가지 좋은 예를 살펴보겠습니다. 🎜🎜1 – 페이드 Vue 라우터 전환🎜🎜🎜페이드 페이지 전환은 아마도 Vue 애플리케이션에 추가할 수 있는 가장 일반적으로 사용되는 애니메이션 중 하나일 것입니다. 🎜🎜요소의 불투명도를 변경하여 이 효과를 얻을 수 있습니다. 🎜🎜먼저 fade 이름으로 Vue Router 전환을 만듭니다. 주목해야 할 또 다른 점은 전환 모드를 out-in으로 설정했다는 것입니다. 🎜🎜세 가지 전환 모드가 있습니다: 🎜기본값 – 진입 및 퇴장 전환이 동시에 발생합니다. in-out – 신규 원소 전환이 먼저 들어갑니다. 그런 다음 현재 요소가 전환됩니다. out-in - 현재 요소가 먼저 전환됩니다. 그런 다음 새로운 요소가 전환됩니다. 🎜새 요소가 원활하게 페이드 인되도록 하려면 새 전환을 시작하기 전에 현재 요소를 삭제해야 합니다. 그래서 mode="out-in"을 사용합니다. 🎜🎜<transition>은 애니메이션 주기 동안 동적으로 추가/제거되는 여러 CSS 클래스를 제공합니다. 🎜🎜6개의 전환 수업이 있습니다(3개 입학, 3개 퇴사). 🎜🎜v-enter-from: 항목 전환의 시작 상태를 정의합니다. 요소가 삽입되기 전에 적용되며 요소가 삽입된 후 다음 프레임에서 제거됩니다. 🎜 🎜v-leave-from: 떠나기 전환의 시작 상태를 정의합니다. 이탈 전환이 트리거되면 즉시 적용되며 다음 프레임에서 제거됩니다. 🎜 🎜v-enter-active: 항목 전환이 적용될 때의 상태를 정의합니다. 전환 전체에 적용되고 요소가 삽입되기 전에 적용되며 전환/애니메이션이 완료된 후에 제거됩니다. 이 클래스는 전환 입력을 위한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다. 🎜 🎜v-leave-active: 나가기 전환이 적용될 때의 상태를 정의합니다. 종료 전환 전체에 적용되고, 종료 전환이 트리거될 때 즉시 적용되며, 전환/애니메이션이 완료된 후 제거됩니다. 이 클래스는 출구 전환에 대한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다. 🎜 🎜v-enter-to: 항목 전환의 최종 상태를 정의합니다. 요소가 삽입된 후(동시에 v-enter-from가 제거됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후 제거됩니다. 🎜 🎜v-leave-to: 전환 종료의 최종 상태입니다. 이탈 전환이 트리거된 후(동시에 v-leave-from가 제거됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후에 제거됩니다. 🎜 注意:当我们为过渡提供一个name属性时，这是默认名称。类的格式是name-enter-from、name-enter-active，等等。我们希望进入和离开状态的opacity 为0。然后，当我们的过渡处生效状态时，对 opacity 进行动画的处理。 // fade styles! .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } 로그인 후 복사 로그인 후 복사 最后的效果： 2 – Slide Vue Router Transitions 我们要构建的下一个过渡是幻灯片过渡。模板如下所示。由于我们希望进入和离开过渡同时发生，因此使用默认模式即可。 // slide transition <router-view v-slot="{ Component }"> <transition name="slide"> <component :is="Component" /> </transition> </router-view> 로그인 후 복사 로그인 후 복사 为了让例子更好看，我们给每个页面加上下面的样式： // component wrapper .wrapper { width: 100%; min-height: 100vh; } 로그인 후 복사 로그인 후 복사 最后，在过渡样式里为要滑动的组件设置相关的属性。如果需要不同的滑动方向，只需更改CSS属性（top, bottom, left, right）。 // slide styles! .slide-enter-active, .slide-leave-active { transition: all 0.75s ease-out; } .slide-enter-to { position: absolute; right: 0; } .slide-enter-from { position: absolute; right: -100%; } .slide-leave-to { position: absolute; left: -100%; } .slide-leave-from { position: absolute; left: 0; } 로그인 후 복사 로그인 후 복사 最终的效果: 3 – Scale Vue Router Transitions 创建缩放过渡与我们的淡入过渡非常相似。我们再次将模式设置为 out-in，以便我们可以确保动画的正确顺序。 // scale transition! <router-view v-slot="{ Component }"> <transition name="scale" mode="out-in"> <component :is="Component" /> </transition> </router-view> 로그인 후 복사 .scale-enter-active, .scale-leave-active { transition: all 0.5s ease; } .scale-enter-from, .scale-leave-to { opacity: 0; transform: scale(0.9); } 로그인 후 복사 这里给整个网页提供黑色的背景色会让过渡看上去更干净。 4 – Combining Vue Router Transitions 创建过渡的方式有很多很多但是，我认为不要过度过的，刻意的去做过渡。过渡动效应该是很小的，微妙的增强功能，而不是会让应用产生干扰因素。我认为实现较好过渡是将一些更基础的过渡结合在一起。例如，让我们将幻灯片放大和缩小合并为一个过渡。 <router-view v-slot="{ Component }"> <transition name="scale-slide"> <component :is="Component" /> </transition> </router-view> 로그인 후 복사 .scale-slide-enter-active, .scale-slide-leave-active { position: absolute; transition: all 0.85s ease; } .scale-slide-enter-from { left: -100%; } .scale-slide-enter-to { left: 0%; } .scale-slide-leave-from { transform: scale(1); } .scale-slide-leave-to { transform: scale(0.8); } 로그인 후 복사 原文地址：https://learnue.co/2021/01/4-awesome-of-vue-router-transitions/ 作者：Ahmad shaded 译文地址：https://segmentfault.com/a/1190000039802609 更多编程相关知识，请访问：编程视频！！ 위 내용은 4개의 매우 멋진 Vue Router 전환 효과를 가지고 오셔서 수집해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!