4 sehr schöne Vue Router-Übergangseffekte, kommen Sie und holen Sie sie ab!

Dieser Artikel stellt Ihnen 4 sehr schöne Veu-Routing-Übergangseffekte vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vue-Router-Übergänge sind eine schnelle und einfache Möglichkeit, Ihrer Vue-Anwendung Persönlichkeit zu verleihen. Es ermöglicht uns, sanfte Animations-/Übergangseffekte zwischen verschiedenen Seiten der Anwendung hinzuzufügen.

Bei richtiger Anwendung kann es unsere Anwendungen moderner und professioneller machen und so das Benutzererlebnis verbessern.

Im heutigen Artikel stellen wir die Grundlagen des Übergangs mit Vue Router vor und stellen anschließend einige grundlegende Beispiele vor, in der Hoffnung, Ihnen etwas Inspiration zu geben.

Die vier Übergangsseiten, die wir unten erstellen werden.

Vue-Routenübergang zum Projekt hinzufügen

Normalerweise lauten die Vue-Router-Einstellungen wie folgt

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

In älteren Versionen von Vue Router können wir einfach <transition> code>Komponenten-Wrapper <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

  Allerdings müssen wir in der neuen Version von Vue Router v-slot verwenden, um unsere props zu destrukturieren und sie an unsere internen Slots weiterzuleiten. Dieser slow enthält eine dynamische Komponente, die von einer transition umgeben ist. 🎜

  // fade styles!
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  Jede Route hat einen anderen Übergang 🎜🎜Standardmäßig wird mit <transition></transition> code> umschlossen Fügen Sie auf jeder von uns verwendeten Route den gleichen Übergang hinzu. 🎜🎜Es gibt zwei verschiedene Möglichkeiten, Übergänge für jede Route anzupassen. 🎜🎜🎜Übergang zu jedem Komponententeil verschieben🎜🎜🎜Zunächst können wir <transition></transition> zu jeder einzelnen Komponente verschieben, anstatt <transition> Komponente zu verwenden Verpacken Sie unsere dynamischen Komponenten. Wie folgt: 🎜<pre class="brush:html;toolbar:false">// slide transition &lt;router-view v-slot=&quot;{ Component }&quot;&gt; &lt;transition name=&quot;slide&quot;&gt; &lt;component :is=&quot;Component&quot; /&gt; &lt;/transition&gt; &lt;/router-view&gt;</pre>🎜Für jede Route möchten wir einen Übergangseffekt haben. Auf diese Weise können wir jede Route anhand des Namens des Übergangs anpassen. 🎜🎜🎜Dynamische Übergänge mit V-Bind 🎜🎜🎜Ein anderer Ansatz besteht darin, den Namen des Übergangs an eine Variable zu binden. Wir können diese Variable dann basierend auf der Abhörroute dynamisch ändern. 🎜<pre class="brush:css;toolbar:false">// component wrapper .wrapper { width: 100%; min-height: 100vh; }</pre><pre class="brush:css;toolbar:false">// 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; }</pre>🎜Da wir nun die Grundlagen der Vue-Router-Umstellung verstanden haben, schauen wir uns einige schöne Beispiele an. 🎜<h3 id="item-0-3">🎜1 – Fade Vue Router Transitions🎜🎜🎜Fade-Seitenübergänge sind wahrscheinlich eine der am häufigsten verwendeten Animationen, die wir unseren Vue-Anwendungen hinzufügen können. 🎜🎜Wir können diesen Effekt erzielen, indem wir die <code>Deckkraft des Elements ändern. 🎜🎜Zuerst erstellen wir einen Vue-Router-Übergang mit einem fade-Namen. Beachten Sie außerdem, dass wir den Übergangsmodus auf out-in setzen. 🎜🎜Es gibt drei verschiedene Übergangsmodi: 🎜

  • default – Eingangs- und Ausgangsübergänge erfolgen gleichzeitig
  • in-out – neu Elementare Übergänge kommen zuerst ins Spiel. Dann geht das aktuelle Element über.
  • out-in – Das aktuelle Element geht zuerst aus. Dann kommen neue Elemente hinzu.

  🎜Damit neue Elemente reibungslos eingeblendet werden, müssen wir das aktuelle Element löschen, bevor wir einen neuen Übergang beginnen. Wir verwenden also mode="out-in". 🎜🎜<transition></transition> stellt uns mehrere CSS-Klassen zur Verfügung, die während des Animationszyklus dynamisch hinzugefügt/entfernt werden. 🎜🎜Es gibt 6 verschiedene Übergangsklassen (3 für den Eintritt und 3 für den Austritt). 🎜

  • 🎜v-enter-from: Definiert den Startzustand des Eingangsübergangs. Es wird wirksam, bevor das Element eingefügt wird, und wird beim nächsten Frame nach dem Einfügen des Elements entfernt. 🎜
  • 🎜v-leave-from: Definiert den Startzustand des Leave-Übergangs. Es wird sofort wirksam, wenn der Verlassensübergang ausgelöst wird, und wird im nächsten Frame entfernt. 🎜
  • 🎜v-enter-active: Definiert den Zustand, in dem der Eingabeübergang wirksam wird. Gilt während des gesamten Übergangs, wird wirksam, bevor das Element eingefügt wird, und wird nach Abschluss des Übergangs/der Animation entfernt. Mit dieser Klasse können Prozesszeiten, Verzögerungen und Kurvenfunktionen für die Eingabe von Transitionen definiert werden. 🎜
  • 🎜v-leave-active: Definiert den Zustand, in dem der Urlaubsübergang wirksam wird. Gilt während des gesamten Exit-Übergangs, wird sofort wirksam, wenn der Exit-Übergang ausgelöst wird, und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist. Mit dieser Klasse können Prozesszeiten, Verzögerungen und Kurvenfunktionen für Ausgangsübergänge definiert werden. 🎜
  • 🎜v-enter-to: Definieren Sie den Endzustand des Eintrittsübergangs. Wird im nächsten Frame wirksam, nachdem das Element eingefügt wurde (gleichzeitig wird v-enter-from entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist. 🎜
  • 🎜v-leave-to: Der Endzustand des Verlassens des Übergangs. Wird beim nächsten Frame wirksam, nachdem der Verlassen-Übergang ausgelöst wurde (gleichzeitig wird v-leave-from entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist. 🎜

  注意:当我们为过渡提供一个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

  更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt von4 sehr schöne Vue Router-Übergangseffekte, kommen Sie und holen Sie sie ab!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!