Vueドキュメントにおけるカスタム遷移関数の適用例の分析-Vue.js-php.cn

Vueドキュメントにおけるカスタム遷移関数の適用例の分析

王林

リリース： 2023-06-21 09:30:07

オリジナル

1291 人が閲覧しました

Vue カスタムトランジション関数は、要素の挿入、更新、削除時のトランジション効果の特定の動作を制御するために使用されます。この関数は、遷移する要素、遷移クラス名、遷移を完了するためのコールバック関数を含むパラメータオブジェクトを受け取ります。

Vue では、CSS クラス名を通じてトランジション効果を実現できます。 Vue がトランジション効果を処理する場合、トランジションクラス名が特定の順序で要素に追加され、それによってアニメーション効果がトリガーされます。たとえば、「v-enter」および「v-enter-active」クラス名は、要素の挿入時に追加され、要素の挿入後に削除されます。

ただし、Vue のデフォルトのトランジション効果は少し単調で、さまざまなシナリオのニーズを満たすのが困難です。この時点で、Vue が提供するカスタムトランジション関数を使用して、より自由で柔軟なトランジション効果を実現できます。

以下では、例を使用してカスタム遷移関数の使用方法を詳しく紹介します。

カスタム遷移関数の例

Vue を使用して遷移関数をカスタマイズする方法を示すために、画像カルーセルコンポーネントを例に挙げます。このコンポーネントは、画像の自動カルーセルと手動切り替えを実現できます。カスタムトランジション関数を使用して、画像のトランジション効果を実現します。

コンポーネントテンプレート

最初に、表示画像と画像を手動で切り替えるためのボタンを含むカルーセルコンポーネントテンプレートを定義します。

<template>
  <div class="carousel">
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <img :src="currentImg" key="currentImg" class="image" />
    </transition>
    <div class="button-group">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

ログイン後にコピー

コンポーネントデータと関数

次に、コンポーネントのデータ、計算されたプロパティ、およびメソッドを定義します。

<script>
export default {
  data() {
    return {
      imgs: [
        "https://placekitten.com/g/300/200",
        "https://placekitten.com/g/300/210",
        "https://placekitten.com/g/300/220"
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex];
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.imgs.length) % this.imgs.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const delay = el.dataset.index * 1000;
      setTimeout(() => {
        el.style.transition = "opacity 1s";
        el.style.opacity = 1;
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = "opacity 1s";
      el.style.opacity = 0;
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

ログイン後にコピー

その中で、imgs 配列には回転する必要があるすべての画像リンクが含まれており、currentIndex は現在表示されている画像インデックスを表します。。 currentImg 関数は、現在の画像へのリンクを返します。

prev メソッドと next メソッドは、画像を手動で切り替えるために使用されます。 beforeEnter、enter、leave はカスタム遷移関数で、それぞれ要素の挿入、更新、削除時の遷移効果に対応します。

エンタートランジション関数では、setTimeout を使用して、各ピクチャを異なる時点で表示する効果を実現します。 Leave Transition 関数では、遅延関数を使用して、要素ノードを破棄する前にアニメーション効果が完了するのを待ちます。