Vue ページ遷移アニメーションの実装と一般的なアニメーション効果-Vue.js-php.cn

Vue ページ遷移アニメーションの実装と一般的なアニメーション効果

王林

リリース： 2023-06-09 16:11:59

オリジナル

1710 人が閲覧しました

Vue は、データ駆動型のアプローチを使用する人気の JavaScript フレームワークで、開発者が強力な対話性と美しいデータプレゼンテーションを備えた単一ページの Web アプリケーションを構築するのを支援します。 Vue には多くの便利な機能が組み込まれており、その 1 つがページ遷移アニメーションです。この記事では、Vue のトランジションアニメーション機能の使用方法と、最も一般的なアニメーション効果について説明します。

Vue ページ遷移アニメーションの実装

Vue のページ遷移アニメーションは、Vue の <transition> コンポーネントと <transition-group> コンポーネントによって実現されます。以下では、これら 2 つのコンポーネントをそれぞれ紹介します。

<transition>

<transition>コンポーネントは、ラップされた要素が挿入、更新、または削除されるときに、トランジションアニメーション効果を自動的に実行できます。

このコンポーネントは、before-enter、enter、after-enter、enter-canceled、および # を##before-leave、leave、after-leave、leave-canceled およびその他のフック関数を使用して、開始と終了を制御できます。そして「キャンセル」。

以下は単純な

<transition> アニメーション効果で、挿入時の要素の遷移アニメーションを示しています。このコンポーネントには、アニメーションの名前を指定する name 属性が必要であることに注意してください。以下の例では、アニメーション名は fade です。ここの CSS スタイルは、要素の最初と最後のトランジションアニメーション効果を定義します。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

ログイン後にコピー

<transition-group>

<transition-group>このコンポーネントは <transition> とよく似ていますが、同時に挿入と削除が必要なリスト項目やテーブルなどの要素に適しています。

<transition> コンポーネントと同様に、before-enter# などのフック関数を <transition-group> コンポーネントで定義できます。 ## 、 enter など

<transition-group>

遷移コンポーネントによって生成される HTML タグのタイプを指定するには、tag 属性を指定する必要があります。また、Vue が挿入、更新、または削除された要素を正しく識別できるように、各子要素に一意のキー値が必要です。以下の例では、ボタンがクリックされるたびに項目を追加または削除する単純なリストを示します。この例では、

<transition-group>

コンポーネントを使用し、HTML タグタイプを ul として指定します。リスト内の各項目には、Vue がトランジションアニメーションを正しく実行するのに役立つキー値が付属しています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:HTML;toolbar:false;'><template> <div> <button @click="shift()">Add/Remove Item</button> <transition-group name="list" tag="ul"> <li v-for="item in items" :key="item">{{ item }}</li> </transition-group> </div> </template> <script> export default { data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"], }; }, methods: { shift() { if (this.items.length > 0) { this.items.shift(); } else { this.items.push("New Item"); } }, }, }; </script> <style> .list-enter-active, .list-leave-active { transition: all 0.5s; } .list-enter, .list-leave-to { opacity: 0; transform: translateY(30px); } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>よく使われるトランジションアニメーションエフェクト

Vueのトランジションアニメーションの使い方を紹介しました。一般的なトランジションアニメーション効果をいくつか見てみましょう。

Fade

エフェクトは、フェードアウトまたはフェードアウトに使用されます。要素の不透明度を 0 から 1、または 1 から 0 に変更します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:HTML;toolbar:false;'><transition name="fade"> <div v-if="show">Hello Vue!</div> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>Slide

Slide

この効果は、要素が外側にスライドしたり、片側にスライドしたりするために使用されます。要素の位置をある位置から別の位置に移動します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:HTML;toolbar:false;'><transition name="slide"> <div v-if="show">Hello Vue!</div> </transition> <style> .slide-enter-active, .slide-leave-active { transition: transform 0.5s; } .slide-enter-to, .slide-leave { transform: translateX(100%); } .slide-enter, .slide-leave-to { transform: translateX(-100%); } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>スケール

スケール

エフェクトは、要素を小さいものから大きいもの、または大きいものから小さいものにスケールするために使用されます。要素の幅と高さをあるサイズから別のサイズに縮小します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:HTML;toolbar:false;'><template> <div> <button @click="show = !show">Toggle show</button> <transition name="scale"> <div v-if="show" class="box"></div> </transition> </div> </template> <style> .box { width: 100px; height: 100px; background-color: red; } .scale-enter-active, .scale-leave-active { transition: transform 0.5s; } .scale-enter, .scale-leave-to { transform: scale(0); } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>Rotate

Rotate

エフェクトは、要素を軸を中心に回転させるために使用されます。要素をある角度で回転させます。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="rotate">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(180deg);
}
</style>

ログイン後にコピー

概要
Vue のトランジション アニメーション機能を使用すると、ページ要素が挿入、更新、または削除されたときにアニメーショントランジション効果を追加できるため、ページがより鮮やかで興味深いものになります。この記事では、Vue の 
<transition> コンポーネントと <transition-group> コンポーネントを使用してトランジション アニメーションを実装する方法を紹介し、また、一般的に使用されるいくつかのトランジション アニメーション効果も紹介します。 Vue アプリケーションにアニメーション効果を追加する必要がある場合は、これらのコンポーネントを試してみるとよいでしょう。 
以上がVue ページ遷移アニメーションの実装と一般的なアニメーション効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。