記事ディレクトリ
Vue3 では、多くの組み込みコンポーネントにより、アプリケーションをより便利に開発できます。
transition
このブログでは&
transition-group
コンポーネントとその使い方 を紹介します 。
1. トランジション コンポーネント
<transition>コンポーネントは、要素が挿入または削除されたときにトランジション効果を追加するために使用されます。たとえば、リストに項目を追加または削除する場合、<transition>コンポーネントを使用してこれらのアクションをアニメーション化できます。具体的な使い方は以下の通りです。
1.1. 基本的な使い方
<template>
<div>
<button @click="show = !show">显示/隐藏</button>
<transition>
<div v-if="show">Hello, World!</div>
</transition>
</div>
</template>
<script setup lang="ts">
import {
ref } from 'vue';
const show = ref(false)
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
上記のコードでは、<transition>コンポーネントを使用して<div>要素をラップしています。条件showが のtrue場合、<div>要素が DOM に挿入され、遷移アニメーションが表示されます。条件showが のfalse場合、<div>要素は DOM から削除されます。
1.2. CSS 遷移クラスの紹介
名前が付けられていない場合、入り口と出口のトランジションに適用される合計 6 つの CSS クラスがあります。
-
v-enter-from: アニメーションの開始状態に入ります。要素の挿入前に追加され、要素の挿入が完了した後の次のフレームで削除されます。 -
v-enter-active: アニメーションの有効状態に入ります。エントリ アニメーション フェーズ全体に適用されます。要素が挿入される前に追加され、トランジションまたはアニメーションが完了した後に削除されます。このクラスを使用して、着信アニメーションの持続時間、遅延、および速度曲線タイプを定義できます。 -
v-enter-to: アニメーションの終了状態に入ります。要素の挿入が完了した後に次のフレームを追加し (つまり、v-enter-from が削除されるのと同時に)、遷移またはアニメーションが完了した後に削除されます。 -
v-leave-from: アニメーションの開始状態を終了します。exit トランジションがトリガーされるとすぐに追加され、1 フレーム後に削除されます。 -
v-leave-active: アニメーションのアクティブ状態を終了します。終了アニメーション フェーズ全体に適用されます。exit トランジションがトリガーされるとすぐに追加され、トランジションまたはアニメーションの完了後に削除されます。このクラスを使用して、終了アニメーションの持続時間、遅延、速度曲線タイプを定義できます。 -
v-leave-to: アニメーションの終了状態を終了します。leave アニメーションが発生した後に次のフレームを追加し (つまり、v-leave-from が削除されるのと同時に)、トランジションまたはアニメーションの完了後に削除されます。
1.3. トランジション効果に名前を付ける
名前付きのトランジションの場合、それに適用される名前にはその名前のプレフィックス过渡 class が付きます。v以下は、トランジションの命名の例です。
1.3.1. 基本的な使い方
<template>
<div>
<button @click="show = !show">显示/隐藏</button>
<transition name="hide">
<div v-if="show">Hello, World!</div>
</transition>
</div>
</template>
<script setup lang="ts">
import {
ref } from 'vue';
const show = ref(false)
</script>
<style scoped>
.hide-enter-active,
.hide-leave-active {
transition: opacity 2s ease;
}
.hide-enter-from,
.hide-leave-to {
opacity: 0;
}
</style>
注:上記の例のように、<Transition> これらは通常一緒に使用されます。原生 CSS 过渡このプロパティはtransition CSS、アニメーション化する必要がある、 属性、持续时间を含む、トランジションのすべての側面を一度に定義できる省略形です速度曲线。
1.4. カスタムアニメーション（アニメーション）との併用
原生 CSS 动画要素が挿入された直後に削除されるのCSS transitionではなく、イベントが発生したときに削除されることを除いて、基本的に同じ方法で適用されます。*-enter-fromanimationend
それらのほとんどは、と の下で簡単に宣言でき CSS 动画ます。次に例を示します。*-enter-active *-leave-active class
<template>
<div>
<button @click="show = !show">显示/隐藏</button>
<transition name="hide">
<div v-if="show">Hello, World!</div>
</transition>
</div>
</template>
<script setup lang="ts">
import {
ref } from 'vue';
const show = ref(false)
</script>
<style scoped>
.hide-enter-active {
animation: scsle-in 0.5s;
}
.hide-leave-active {
animation: scsle-in 0.5s reverse;
}
@keyframes scsle-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>
1.5. カスタム遷移クラス
<Transition>次の props を渡して、カスタム遷移クラスを指定できます。
- クラスから入る
- アクティブクラスに入る
- 入学式
- 授業を離れる
- リーブアクティブクラス
- クラスへの休暇
渡されたこれらのクラスは、対応するフェーズのデフォルトのクラス名をオーバーライドします。この機能は、次のような Vue のアニメーション メカニズムの下に他のサードパーティの CSS アニメーション ライブラリを統合する場合に非常に便利です Animate.css。
<template>
<button @click="show = !show">Toggle</button>
<Transition
name="custom-classes"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>
</template>
<script setup>
import {
ref } from 'vue'
const show = ref(true)
</script>
<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
</style>
1.6.<Transition>コンポーネントのライフサイクル
<Transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@enter-cancelled="onEnterCancelled"
@before-leave="onBeforeLeave"
@leave="onLeave"
@after-leave="onAfterLeave"
@leave-cancelled="onLeaveCancelled"
>
<!-- ... -->
</Transition>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {
}
// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用，则这个回调是可选参数
done()
}
// 当进入过渡完成时调用。
function onAfterEnter(el) {
}
function onEnterCancelled(el) {
}
// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {
}
// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
// 调用回调函数 done 表示过渡结束
// 如果与 CSS 结合使用，则这个回调是可选参数
done()
}
// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {
}
// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {
}
1.7. 移行の一般的なシナリオ
- 再利用可能なトランジション効果
Mediumのトランジション効果はvue、パッケージ化して再利用できます。再利用できるトランジションを作成するには、<Transition>コンポーネントのラッパー コンポーネントを作成し、スロット コンテンツを渡す必要があります。
<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>
<template>
<!-- 包装内置的 Transition 组件 -->
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot> <!-- 向内传递插槽内容 -->
</Transition>
</template>
<style>
/*
必要的 CSS...
注意：避免在这里使用 <style scoped>
因为那不会应用到插槽内容上
*/
</style>
MyTransition組み込みコンポーネントのようにインポートして使用できるようになりました。
<MyTransition>
<div v-if="show">Hello</div>
</MyTransition>
- 登場時の遷移
ノードが最初にレンダリングされるときに遷移効果を適用する場合は、次を追加できます appear prop。
<Transition appear>
...
</Transition>
- 要素間の遷移
v-if / v-show要素を切り替えるだけでなく、v-if / v-else / v-else-if複数のコンポーネントを切り替えることもできます。一度に 1 つの要素だけがレンダリングされるようにしてください。
<Transition>
<button v-if="docState === 'saved'">Edit</button>
<button v-else-if="docState === 'edited'">Save</button>
<button v-else-if="docState === 'editing'">Cancel</button>
</Transition>
- 移行モード
前の例では、入る要素と出る要素の両方が同時にアニメーション化されていたため、position: absolute両方が存在する場合のレイアウトの問題を回避するためにそれらを設定する必要がありました。
ただし、多くの場合、これではニーズが満たされない場合があります。最初に退出アニメーションを実行し、要素が終了した後に要素の開始アニメーションを実行したい場合があります。このようなアニメーションを手動でプログラミングするのは非常に複雑ですが、 :`<Transition>を渡すことでmode propこの動作を実現できます。
<Transition mode="out-in">
...
</Transition>
- コンポーネント間の移行
<Transition>動的コンポーネントを切り替えるためにも使用できます。
<Transition name="fade" mode="out-in">
<component :is="activeComponent"></component>
</Transition>
- 動的遷移
<Transition>動的にすることもできますprops (比如 name)！これにより、状態の変化に基づいてさまざまなタイプの遷移を動的に適用できます。
<Transition :name="transitionName">
<!-- ... -->
</Transition>
この機能の便利な点は、あらかじめ複数のグループを定義しておき CSS 过渡或动画的 class、それらを動的に切り替えることができることです。
2. 遷移グループ コンポーネント
<TransitionGroup> サポート および は基本的に、および と<Transition>同じですが、次の違いがあります。 propsCSS 过渡 class JavaScript 钩子监听器
-
デフォルトでは、コンテナ要素はレンダリングされません。ただし、
tag prop渡すことで、コンテナ要素としてレンダリングする要素を指定できます。 -
过渡模式相互に排他的な要素を切り替えないため、ここでは使用できません。 -
リスト内の各要素には一意の が必要です
key attribute。 -
CSSトランジションは、classコンテナー要素ではなく、リスト内の要素に適用されます。
<transition-group>コンポーネントは、複数の要素が挿入または削除されたときにトランジション効果を追加するために使用されます。たとえば、リスト内のアイテムを追加または削除する場合、<transition-group>コンポーネントを使用してこれらのアクションをアニメーション化できます。具体的な使い方は以下の通りです。
2.1. 基本的な使い方
<template>
<div>
<button @click="handleAddLi">显示/隐藏</button>
<transition-group tag="ul">
<li v-for="item in items" :key="item.id">{
{ item.text }}</li>
</transition-group>
</div>
</template>
<script setup lang="ts">
import {
reactive } from 'vue';
const items = reactive([
{
id: 1,
text: 'test1'
},
{
id: 2,
text: 'test2'
}
])
const handleAddLi = () => {
items.push({
id: items.length + 1,
text: 'test' + (items.length + 1)
})
}
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
上記のコードでは、<transition-group>コンポーネントを使用して<ul>要素をラップし、v-forディレクティブを使用してリストをレンダリングしています。