4 つの非常に素晴らしい Vue Router トランジション エフェクト、ぜひ集めてください!

この記事では、非常に優れた Veu ルーティング トランジション エフェクトを 4 つ紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Vue Router トランジションは、Vue アプリケーションに個性を追加するための迅速かつ簡単な方法です。これにより、アプリケーションの異なるページ間にスムーズなアニメーション/遷移効果を追加できます。

正しく使用すると、アプリケーションがよりモダンでプロフェッショナルになり、ユーザー エクスペリエンスが向上します。

今日の記事では、Vue Router を使用した移行の基礎知識を紹介し、その後、いくつかの基本的な例を紹介して、インスピレーションを与えていただければ幸いです。

これから作成する 4 つの遷移ページ。

Vue ルーティング トランジションをプロジェクトに追加します

通常、Vue ルーター設定は次のようになります

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

Vue Router の古いバージョンでは、単純に <transition> コンポーネントを <router-view> でラップすることができました。

ただし、新しいバージョンの Vue Router では、v-slot を使用して props を構造化し、内部スロットに渡す必要があります。この slow には、transition で囲まれた動的コンポーネントが含まれています。

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

各ルートには異なるトランジションがあります

デフォルトでは、<transition><component> でラップされたものが追加に含まれます。使用するすべてのルートで同じトランジションを実行します。

各ルートのトランジションをカスタマイズするには 2 つの異なる方法があります。

トランジションを各コンポーネント パーツに移動します

まず、## を使用する代わりに、<transition> を個々のコンポーネントに移動します。 #<transition> コンポーネントを使用して動的コンポーネントをラップします。次のように:

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

トランジション効果を持たせたいルートごとに、この方法でトランジションの名前によって各ルートをカスタマイズできます。

v-bind を使用した動的トランジション

もう 1 つの方法は、トランジションの名前を変数にバインドすることです。その後、リスニング ルートに基づいてこの変数を動的に変更できます。

<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 の基本を理解したところで、いくつかの素晴らしい例を見てみましょう。

1 – フェード Vue ルーター トランジション

フェード ページ トランジションは、おそらく Vue アプリケーションに追加できる最も一般的なアニメーションの 1 つです。

要素の

不透明度を変更することで、この効果を実現できます。

まず、

fade という名前で Vue Router トランジションを作成します。もう 1 つ注意すべき点は、遷移モードを out-in に設定していることです。

3 つの異なる遷移モードがあります:

• 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: 離脱遷移の終了状態。 Leave トランジションがトリガーされた後の次のフレームで有効になり (同時に 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 中国語 Web サイトの他の関連記事を参照してください。