トランジションフック関数を使用して Vue でアニメーショントランジション効果を実現する方法

近年、フロントエンド テクノロジの発展はますます速くなり、Vue フレームワークは Web 開発で最も人気のあるフロントエンド フレームワークの 1 つになりました。 Vue フレームワークは強力で柔軟なアニメーション効果を提供し、Web インターフェイスをより鮮明で魅力的なものにし、ユーザー エクスペリエンスを向上させます。 Vue のトランジション フック関数を使用してアニメーションのトランジション効果を実現するのは、一般的な方法の 1 つです。

1. 遷移フック関数とは

Vueにおける遷移処理はCSS遷移ではなく、動的クラス名とJSフック関数の組み合わせによって行われます。 Vue には、「before-enter」、「enter」、「after-enter」、「enter-canceled」、「before-leave」、「leave」という 6 つのフック関数が用意されています。

2. 遷移フック関数の使用方法

要素が DOM に出入りすると、遷移状態がトリガーされます。このとき、対応する関数を使用できます。トランジション効果を定義するフック関数。この効果は、Vue コンポーネントの「transition」タグを通じて実現できます。

たとえば、カスタム コンポーネントで「transition」タグを使用すると、単純なフェードアウト効果を実現できます。

<template>
  <div v-show="show" class="fade">
    <p>{{text}}</p>
    <button @click="show = false">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      text: '这是一个淡出效果'
    }
  }
}
</script>

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

上の例では、名前は次のクラスであると定義しました。 「フェード」を定義し、それぞれ開始時と終了時の遷移状態を定義します。次に、Vue コンポーネントの「v-show」ディレクティブを使用して、コンポーネントの表示と非表示をトリガーします。

コンポーネントの表示と非表示がトリガーされると、Vue はフェードアウト効果を実現するために対応するクラス名を自動的に追加します。この時点で必要なのは、「style」タグで対応する遷移状態を定義することだけです。

3. 遷移フック関数のパラメータ

フック関数のパラメータは 4 つあり、「before-enter」関数と「before-leave」関数には、パラメータは 1 つだけです。挿入または削除される DOM 要素を示します。他の 4 つのフック関数にはそれぞれ 2 つのパラメータがあります:

• el: 挿入される DOM 要素を示します。
• done : は、遷移完了後のコールバック関数を示します。この関数は、アニメーション完了後に特定の操作を実行するために使用できます。

次に、完全な例を示して、トランジションフック機能。

<template>
  <div>
    <button @click="show = !show">{{ show ? 'Hide' : 'Show' }}</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <div v-show="show" class="box"></div>
    </transition>
  </div>
</template>

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

  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0;  // 设置元素开始状态
    },
    enter: function(el, done) {
      Vue.nextTick(() => {
        el.style.transition = 'opacity .5s';
        el.style.opacity = 1;    // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterEnter: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    enterCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
    beforeLeave: function(el) {
      el.style.opacity = 1;  // 设置元素开始状态
    },
    leave: function(el, done) {
      Vue.nextTick(() => {          
        el.style.transition = 'opacity .5s';
        el.style.opacity = 0;  // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterLeave: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    leaveCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

上の例では、コンポーネントが入ったり出たりするときのさまざまな状態に対応する 8 つの遷移フック関数を定義しました。入ったり出たりするときの特定の遷移効果はフック関数によって制御されます。

コンポーネントに入るとき、「before-enter」フック関数は要素の開始状態を設定し、「enter」フック関数は要素の遷移を設定し、「」を介して「done」をバインドします。 transitionend" イベント 遷移を完了するためのコールバック関数。

同様に、コンポーネントを終了するときは、「before-leave」関数が最初に要素の開始状態を設定し、次に「leave」フック関数が終了の遷移状態を設定し、「done」をバインドします。 "transitionend" イベント 離脱遷移を完了するためのコールバック関数。

4. 概要

Vue では、「transition」タグを使用してさまざまなトランジション効果を実現し、6 つのフック関数を通じてさまざまなトランジション状態を定義できます。トランジションフック関数の使用は、習得する必要がある重要なポイントの 1 つです。フック関数による遷移エフェクトの実装により、コンポーネントの遷移状態をより柔軟に制御できるようになり、Web アプリケーションのユーザー エクスペリエンスが向上し、より鮮やかで魅力的なエフェクトを実現できます。

以上がトランジションフック関数を使用して Vue でアニメーショントランジション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。