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

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

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

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

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

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

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

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

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

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

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

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

每个 Route 都有不同的过渡

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

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

将过 transition 移到各个组件部分

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

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

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

使用 v-bind 的动态过渡

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

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

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').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></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></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></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!