序文

Vue には、状態の変化に基づいて遷移やアニメーションを作成するのに役立つ 2 つの組み込みコンポーネントが用意されています。

<Transition> は、要素またはコンポーネントが DOM に出入りするときにアニメーションを適用します。この章ではその使用方法について説明します。
<TransitionGroup> は、v-for リスト内の要素またはコンポーネントが挿入、移動、または削除されるときにアニメーションを適用します。

これら 2 つのコンポーネントを css と js と組み合わせて使用すると、シンプルで実用的なトランジションとアニメーション効果をすぐに実現できます。以下で順に紹介します。

遷移コンポーネント

導入

<Transition> は組み込みコンポーネントです。つまり、登録せずに他のコンポーネントで使用できます。**デフォルトのスロットを介して渡される要素またはコンポーネントに、出入りするアニメーションを適用できます。** エントリまたはエグジットは、次の条件のいずれかによってトリガーされます。

v-if によってトリガーされるスイッチ
v-show によってトリガーされるスイッチ
特別な要素 <component> によって切り替えられる動的コンポーネント
注: <Transition> は、スロットコンテンツとして単一の要素またはコンポーネントのみをサポートします。コンテンツがコンポーネントの場合、コンポーネントにはルート要素が 1 つだけ必要です。

行動プロセス

<Transition> コンポーネント内の要素が挿入または削除されると、次のことが起こります。

Vue は、CSS トランジションまたはアニメーションがターゲット要素に適用されているかどうかを自動的に検出します。その場合、いくつかの CSS 遷移クラスが適切なタイミングで追加および削除されます。
リスナーとして JavaScript フックがある場合、これらのフック関数は適切なタイミングで呼び出されます。
CSS トランジションやアニメーションが検出されず、JavaScript フックが提供されていない場合、DOM の挿入と削除はブラウザの次のアニメーションフレームの後に実行されます。

CSSと組み合わせる

Vue は、要素の開始と終了のトランジション効果に適用される 6 つのクラスを定義します。
ここに画像の説明を挿入

v-enter-from: アニメーションの開始状態を入力します。要素の挿入前に追加され、要素の挿入が完了した後の次のフレームで削除されます。
v-enter-active: アニメーションのアクティブ状態に入ります。開始アニメーションフェーズ全体に適用されます。要素が挿入される前に追加され、トランジションまたはアニメーションが完了した後に削除されます。このクラスを使用して、受信アニメーションの継続時間、遅延、および速度カーブのタイプを定義できます。
v-enter-to: アニメーションの終了状態を入力します。要素の挿入が完了した後 (つまり、同時に v-enter-from が削除された後)、次のフレームが追加され、トランジションまたはアニメーションが完了した後に削除されます。
v-leave-from: アニメーションの開始状態を終了します。終了トランジションがトリガーされるとすぐに追加され、1 フレーム後に削除されます。
v-leave-active: Leave アニメーションのアクティブな状態。終了アニメーションフェーズ全体に適用されます。終了トランジションがトリガーされるとすぐに追加され、トランジションまたはアニメーションが完了すると削除されます。このクラスを使用して、終了アニメーションの継続時間、遅延、および速度曲線のタイプを定義できます。
v-leave-to: Leave アニメーションの終了状態。Leave アニメーションが起動された後 (つまり、同時に v-leave-from が削除された後)、次のフレームが追加され、トランジションまたはアニメーションが完了した後に削除されます。

<Transition> コンポーネントは、トランジションエフェクト名を宣言するために name prop を渡します (例: <Transition name="fade">)。その後、上記のクラス名の v を name prop に置き換える必要があります (例: fade-)。任します

カスタムクラス名

次の props を渡してカスタム遷移クラスを指定することもできます。

授業から入る
アクティブクラスに入る
クラスに入る
授業を休む
アクティブクラスを離れる
Leave-to-class
渡したクラスは、対応するフェーズのデフォルトのクラス名をオーバーライドします。この機能は、他のサードパーティ CSS アニメーションライブラリを Vue のアニメーションメカニズムに統合する場合に非常に役立ちます。

<!-- 假设你已经在页面中引入了 Animate.css -->
<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>

CSSアニメーションとJSフック機能を同時に使用する

cssの遷移やアニメーションとjsフック関数を併用する場合は、jsフック関数の監視の種類を明示的に指定する必要があります。渡される値はアニメーションまたはトランジションです。

<Transition type="animation">...</Transition>

例

<template>
  <div class="container">
    <h1>过渡效果- 内置组件Transition</h1>
    <div class="example-one">
      <button @click="show = !show">Toggle</button>

      <Transition>
        <p v-show="show">hello</p>
      </Transition>
    </div>
    <div class="example-two">
      <button @click="show2 = !show2">Toggle2</button>

      <Transition name="bounce">
        <p v-if="show2" style="text-align: center">
          Hello here is some bouncy text!
        </p>
      </Transition>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";

const show = ref(true);
const show2 = ref(true);
show2.value = false;
</script>
<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    
    
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    
    
  opacity: 0;
}

// 示例2
.bounce-enter-active {
    
    
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
    
    
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    
    
  0% {
    
    
    transform: scale(0);
  }
  50% {
    
    
    transform: scale(1.25);
  }
  100% {
    
    
    transform: scale(1);
  }
}
</style>

ここに画像の説明を挿入

jsと組み合わせる

<Transition> コンポーネントイベントをリッスンすることで、移行プロセス中に関数をフックします。

before-enter : 要素が DOM に挿入される前に呼び出されます。これを使用して、要素の「開始元」状態を設定します。
enter : 要素が DOM に挿入された後の次のフレームで呼び出されます。これを使用してアニメーションを開始します。
after-enter および enter-canceled : Enter 遷移が完了すると呼び出されます。
before-leave : Leave フックの前に呼び出されます。ほとんどの場合、Leave フックのみを使用してください。
Leave : Leave 遷移が開始されるときに呼び出されます。これを使用して終了アニメーションを開始します。
after-leave : Leave 遷移が完了し、要素が DOM から削除されたときに呼び出されます。
Leave-canceled : v-show トランジションでのみ使用できます。

これらのフックは、CSS トランジションやアニメーションと組み合わせて使用することも、単独で使用することもできます。JavaScript のみで実行されるアニメーションを使用する場合は、:css="false" プロパティを追加することをお勧めします。これは、CSS トランジションの自動検出をスキップできることを Vue に明示的に伝えます。パフォーマンスがわずかに向上するだけでなく、CSS ルールがトランジション効果に誤って干渉することも防止されます。

<template>
  <div class="container">
    <h1>过渡效果- 内置组件Transition</h1>
    <div class="example-one">
      <button @click="show = !show">Toggle</button>

      <Transition>
        <p v-show="show">hello</p>
      </Transition>
    </div>
    <div class="example-two">
      <button @click="show2 = !show2">Toggle2</button>

      <Transition name="bounce" appear>
        <p v-if="show2" style="text-align: center">
          Hello here is some bouncy text!
        </p>
      </Transition>
    </div>
    <h2>js</h2>
    <div>
      <Transition
        appear
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"
        @enter-cancelled="onEnterCancelled"
        @before-leave="onBeforeLeave"
        @leave="onLeave"
        @after-leave="onAfterLeave"
        @leave-cancelled="onLeaveCancelled"
      >
        <div v-show="show2">这是一个box</div>
      </Transition>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";

const show = ref(true);
const show2 = ref(true);

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el: Element) {
    
    
  console.log("在元素被插入到 DOM 之前被调用", el);
}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el: Element, done: any) {
    
    
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log("在元素被插入到 DOM 之后的下一帧被调用", el);

  done();
}

// 当进入过渡完成时调用。
function onAfterEnter(el: Element) {
    
    
  console.log("进入过渡完成 --- onAfterEnter");
}
function onEnterCancelled(el: Element) {
    
    
  console.log("进入过渡完成 --- onEnterCancelled");
}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el: Element) {
    
    
  console.log("在 leave 钩子之前调用");
}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el: Element, done: any) {
    
    
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log("在离开过渡开始时调用", el);

  done();
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el: Element) {
    
    
  console.log("在离开过渡完成、且元素已从 DOM 中移除时调用  --- onAfterLeave");
}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el: Element) {
    
    
  console.log(
    "在离开过渡完成、且元素已从 DOM 中移除时调用 仅在 v-show 过渡中可用  --- onLeaveCancelled"
  );
}
</script>
<style lang="scss" scoped>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
    
    
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    
    
  opacity: 0;
}

// 示例2
.bounce-enter-active {
    
    
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
    
    
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    
    
  0% {
    
    
    transform: scale(0);
  }
  50% {
    
    
    transform: scale(1.25);
  }
  100% {
    
    
    transform: scale(1);
  }
}
</style>

vue-routerと組み合わせる

vue-router を使用する場合、トランジションを使用してトランジション効果を実現できます。ただし、トランジション効果を実装するコンポーネントはルート要素を 1 つだけ持つことができ、そうでない場合は警告が報告されることに注意してください。

例

<script setup lang="ts"></script>

<template>
  <div id="App">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-active {
    
    
  transition: all 1s ease-out;
}
.fade-leave-active {
    
    
  transition: all 1s ease-out;
}
.fade-enter-from,
.fade-leave-to {
    
    
  transform: translateX(20px);
  opacity: 0;
}
</style>

ここに画像の説明を挿入

コンポーネントのその他のプロパティ

初期レンダリング遷移

ノードが最初にレンダリングされるときにトランジション効果を適用したい場合は、Appearance プロップを追加できます。

<Transition appear>
  ...
</Transition>

複数の子要素は v-else-if 遷移を使用します

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>

移行モード

mode 属性は、コンポーネントがアニメーション化されるときに動作する順序を指定できます。モード値が「out-in」の場合は、最初に退出アニメーションが実行され、その後に入場アニメーションが実行されることを意味します。モード値「in-out」はその逆です。

<Transition mode="out-in">
  ...
</Transition>

TransitionGroup コンポーネント

<TransitionGroup> は、v-for リスト内の要素またはコンポーネントの挿入、削除、順序変更をアニメーション化するために使用される組み込みコンポーネントです。

＜トランジション＞との違い

<TransitionGroup> は、基本的に <Transition> と同じプロパティ、CSS 遷移クラス、および JavaScript フックリスナーをサポートしますが、次のような違いがあります。

デフォルトでは、コンテナ要素はレンダリングされません。ただし、タグ prop を渡すことで、コンテナ要素としてレンダリングされる要素を指定できます。
相互に排他的な要素間で切り替えることがなくなったため、ここでは移行モードは使用できません。
リスト内の各要素には一意のキー属性が必要です。
CSS 遷移クラスは、コンテナ要素ではなく、リスト内の要素に適用されます。

動くアニメーション

list-moveクラスを追加すると、スムーズな移動効果を実現できます。残す要素がレイアウトから確実に削除されるようにするには、list-leave-active のときに削除するようにレイアウトメソッドを手動で変更します。

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    
    
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    
    
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    
    
  position: absolute;
}

例


<template>
  <div class="container">
    <h1>TransitionGroup</h1>
    <a-input v-model:value="inputValue" placeholder="请输入" />
    <a-button @click="add">添加</a-button>
    <a-button @click="del">随机删除</a-button>
    <a-button @click="emptyHandler">置空</a-button>
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in items" :key="item">
        {
    
    {
    
     item }}
      </li>
    </TransitionGroup>
  </div>
</template>
<script lang="ts" setup>
import {
    
     reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
const items = reactive<Array<number | string>>([1, 2, 3]);
const inputValue = ref("123");

//  add
const add = () => {
    
    
  console.log(inputValue, inputValue.value);

  if (inputValue.value !== "") {
    
    
    items.push(inputValue.value);
    inputValue.value = "";
  }
};

// del
const del = () => {
    
    
  let randomNum = Math.floor(Math.random() * (items.length - 1));
  items.splice(randomNum, 1);
};

//  emptyHandler
const emptyHandler = () => {
    
    
  items.splice(0);
};
</script>
<style lang="scss" scoped>
.list-move,
.list-enter-active,
.list-leave-active {
    
    
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
    
    
  opacity: 0;
  transform: translateX(10px);
}
/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    
    
  position: absolute;
}
</style>

ここに画像の説明を挿入

エピローグ

終わりました。遷移状態は通常、ルーティング遷移効果など、ページモジュールレベルが変更されるときに使用されます。vue の遷移状態は要素用に設計されています。リスト遷移は、データがリアルタイムで変化する場合に使用できます。

vue3 組み込みコンポーネントの簡単な紹介と適用移行

序文

遷移コンポーネント

導入

行動プロセス

CSSと組み合わせる

カスタムクラス名

CSSアニメーションとJSフック機能を同時に使用する

例

jsと組み合わせる

vue-routerと組み合わせる

例

コンポーネントのその他のプロパティ

初期レンダリング遷移

複数の子要素は v-else-if 遷移を使用します

移行モード

TransitionGroup コンポーネント

＜トランジション＞との違い

動くアニメーション

例

エピローグ

おすすめ

vue3 組み込みコンポーネントの簡単な紹介と適用 移行

序文

遷移コンポーネント

導入

行動プロセス

CSSと組み合わせる

カスタムクラス名

CSSアニメーションとJSフック機能を同時に使用する

例

jsと組み合わせる

vue-routerと組み合わせる

例

コンポーネントのその他のプロパティ

初期レンダリング遷移

複数の子要素は v-else-if 遷移を使用します

移行モード

TransitionGroup コンポーネント

＜トランジション＞との違い

動くアニメーション

例

エピローグ

おすすめ

vue3 組み込みコンポーネントの簡単な紹介と適用移行