もう退屈に表示したり非表示にしたりする必要はありません。Vue のトランジションアニメーションを使用して、Web ページをより動的にします。

Vue は人気のあるフロントエンドフレームワークであり、トランジションアニメーションの実装は重要な機能です。Vue では、トランジションアニメーションを使用すると、よりフレンドリーなユーザーエクスペリエンスをユーザーに提供できます。次に、Vueでトランジションアニメーションを実装する方法を紹介します。

1.トランジションアニメーションとは何か知っていますか？

トランジションアニメーションとは、DOM 要素がある状態から別の状態に変化するときにトランジション効果を追加することで、変化をよりスムーズかつ自然に見せるアニメーション効果を指します。Vue では、トランジションアニメーションを次のシナリオに適用できます。

要素の表示と非表示
要素を動的に追加または削除する
要素の位置の変更

2. Vue遷移アニメーションの実装方法

2.1 CSS トランジション

Vue は、 transition 遷移アニメーションをサポートするコンポーネントを提供します。遷移アニメーションを適用する必要がある要素の外側にコンポーネントをラップし transition 、CSS スタイルを設定するか動的クラスをバインドすることで遷移アニメーションの効果を実現できます。

Vue のトランジションアニメーションは CSS クラス名を追加することで実装されます。トランジションが必要な要素に命令v-if を追加することでv-show 要素の表示と非表示を制御し、transition コンポーネントを使用してアニメーション効果を設定できます。

参考までに例を書いておきます。ボタンに遷移アニメーション効果を追加します。

<template>
  <button @click="show=!show">Toggle</button>
  <transition name="fade">
    <div v-if="show">Hello, World!</div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

上記のコードアイデアでは、 transition ラップされた要素に対する命令div を使用して、要素の表示と非表示を制御します。v-if同時に、コンポーネントにプロパティtransition を追加し name 、CSS スタイルを使用してトランジションアニメーションの効果を定義しました。このうち、、.fade-enter-active は .fade-leave-active それぞれ入場時、退場時の遷移アニメーションを表し、、、 .fade-enter は .fade-leave-to それぞれ入場時、退場時の要素のスタイルを表します。

2.2 JS遷移

CSS トランジションの使用に加えて、JavaScript トランジションを Vue で使用してアニメーション効果を実現することもできます。CSS トランジションに対する JS トランジションの利点は、トランジションアニメーションをより柔軟に制御できることです。

CSSトランジションとは異なり、JavaScriptトランジションはトランジションアニメーションをより柔軟に制御でき、より豊かな効果を実現できます。Vue は、トランジションアニメーションの効果をカスタマイズできるイベントフック関数を提供します。

Vue では次のイベントフック関数が提供されています。

before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled

transition コンポーネントのプロパティmode を使用してトランジションモードを設定できます。プロパティを使用するとmode 、Vue は対応するフック関数を自動的に呼び出し、これらのフック関数を通じてトランジション効果をカスタマイズできます。

以下は、JS トランジションに基づいて作成したデモです。ボタンにカスタムトランジションアニメーションを追加します。

<template>
  <button @click="show=!show">Toggle</button>
  <transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="show">Hello, World!</div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = 'left';
    },
    enter(el, done) {
      anime({
        targets: el,
        opacity: 1,
        translateX: [20, 0],
        easing: 'easeInOutQuad',
        duration: 500,
        complete: done
      });
    },
    leave(el, done) {
      anime({
        targets: el,
        opacity: 0,
        translateX: [-20, 0],
        easing: 'easeInOutQuad',
        duration: 500,
        complete: done
      });
    }
  }
};
</script>

transition 上記のフロントエンドページでは、コンポーネントの css プロパティをに設定して CSS トランジションを無効にし false 、その後 before-enter、、enter 、などのフック関数を使用してleave トランジションアニメーションをカスタマイズしました。このサンプルコードでは、サードパーティのアニメーションライブラリ Anime.js を使用して、要素の出入り時のアニメーション効果を実現すると同時に、アニメーションの完了後にそれを Vue に通知する関数を手動で呼び出す必要がありますanime 。 done トランジションアニメーションが完了しました。

3. 要約する

私が書いたこの記事の紹介を通じて、Vue トランジションアニメーションの基本概念をさらに学び、Vue でトランジションアニメーションを実装する方法をマスターできます。CSS トランジションを使用するか JavaScript トランジションを使用するかによって、ユーザーにより使いやすいエクスペリエンスを提供できます。