ホームページ >ウェブフロントエンド >Vue.js >Vue ページ遷移アニメーションの実装と一般的なアニメーション効果
Vue ページ遷移アニメーションの実装と一般的なアニメーション効果
- 王林オリジナル
- 2023-06-09 16:11:591753ブラウズ
Vue は、データ駆動型のアプローチを使用する人気の JavaScript フレームワークで、開発者が強力な対話性と美しいデータ プレゼンテーションを備えた単一ページの Web アプリケーションを構築するのを支援します。 Vue には多くの便利な機能が組み込まれており、その 1 つがページ遷移アニメーションです。この記事では、Vue のトランジション アニメーション機能の使用方法と、最も一般的なアニメーション効果について説明します。
Vue ページ遷移アニメーションの実装
Vue のページ遷移アニメーションは、Vue の 300ff3b250bc578ac201dd5fb34a0004 コンポーネントと 5c8969d1376a171e8b0ec4a1c01f185d コンポーネントによって実現されます。以下では、これら 2 つのコンポーネントをそれぞれ紹介します。
300ff3b250bc578ac201dd5fb34a0004
300ff3b250bc578ac201dd5fb34a0004コンポーネントは、ラップされた要素が挿入、更新、または削除されるときに、トランジション アニメーション効果を自動的に実行できます。
このコンポーネントは、before-enter、enter、after-enter、enter-canceled、および # を##before-leave、leave、after-leave、leave-canceled およびその他のフック関数を使用して、開始と終了を制御できます。そして「キャンセル」。
300ff3b250bc578ac201dd5fb34a0004 アニメーション効果で、挿入時の要素の遷移アニメーションを示しています。このコンポーネントには、アニメーションの名前を指定する 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>5c8969d1376a171e8b0ec4a1c01f185d
5c8969d1376a171e8b0ec4a1c01f185dこのコンポーネントは 300ff3b250bc578ac201dd5fb34a0004 とよく似ていますが、同時に挿入と削除が必要なリスト項目やテーブルなどの要素に適しています。
300ff3b250bc578ac201dd5fb34a0004 コンポーネントと同様に、before-enter# などのフック関数を 5c8969d1376a171e8b0ec4a1c01f185d コンポーネントで定義できます。 ## 、 enter など
遷移コンポーネントによって生成される HTML タグのタイプを指定するには、tag 属性を指定する必要があります。また、Vue が挿入、更新、または削除された要素を正しく識別できるように、各子要素に一意のキー値が必要です。 以下の例では、ボタンがクリックされるたびに項目を追加または削除する単純なリストを示します。この例では、
コンポーネントを使用し、HTML タグ タイプを ul として指定します。リスト内の各項目には、Vue がトランジション アニメーションを正しく実行するのに役立つキー値が付属しています。 <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>よく使われるトランジションアニメーションエフェクト
Vueのトランジションアニメーションの使い方を紹介しました。一般的なトランジション アニメーション効果をいくつか見てみましょう。
Fade
Fade エフェクトは、フェードアウトまたはフェードアウトに使用されます。要素の不透明度を 0 から 1、または 1 から 0 に変更します。 <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>Slide
この効果は、要素が外側にスライドしたり、片側にスライドしたりするために使用されます。要素の位置をある位置から別の位置に移動します。 <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>スケール
エフェクトは、要素を小さいものから大きいもの、または大きいものから小さいものにスケールするために使用されます。要素の幅と高さをあるサイズから別のサイズに縮小します。 <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>Rotate
エフェクトは、要素を軸を中心に回転させるために使用されます。要素をある角度で回転させます。 <pre class='brush:HTML;toolbar:false;'><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></pre>概要
Vue のトランジション アニメーション機能を使用すると、ページ要素が挿入、更新、または削除されたときにアニメーショントランジション効果を追加できるため、ページがより鮮やかで興味深いものになります。この記事では、Vue の
300ff3b250bc578ac201dd5fb34a0004 コンポーネントと 5c8969d1376a171e8b0ec4a1c01f185d コンポーネントを使用してトランジション アニメーションを実装する方法を紹介し、また、一般的に使用されるいくつかのトランジション アニメーション効果も紹介します。 Vue アプリケーションにアニメーション効果を追加する必要がある場合は、これらのコンポーネントを試してみるとよいでしょう。
以上がVue ページ遷移アニメーションの実装と一般的なアニメーション効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。