Vue を使用してタイプライターアニメーション効果を実装する方法-Vue.js-php.cn

Vue を使用してタイプライターアニメーション効果を実装する方法

王林

リリース： 2023-09-19 09:33:35

オリジナル

1743 人が閲覧しました

Vue を使用してタイプライターアニメーション効果を実装する方法

Vue を使用してタイプライターアニメーションの特殊効果を実装する方法

タイプライターアニメーションは、Web サイトのタイトル、スローガンなどでよく使用される、一般的で目を引く特殊効果です。テキストが表示されます。 Vue では、Vue カスタム命令を使用してタイプライターアニメーション効果を実現できます。この記事では、Vue を使用してこの特殊効果を実現する方法を詳しく紹介し、具体的なコード例を示します。

ステップ 1: Vue プロジェクトを作成する
まず、Vue プロジェクトを作成する必要があります。 Vue CLI を使用すると、新しい Vue プロジェクトをすばやく作成したり、Vue ライブラリを HTML ファイルに手動で導入したりできます。この記事では、Vue CLI を使用して新しいプロジェクトを作成します。具体的な手順は次のとおりです:

Vue CLI のインストール: ターミナルを開き、次のコマンドを実行して Vue CLI をインストールします。
npm install -g vue-cli
新しい Vue プロジェクトの作成: 次のコマンドを実行して、新しい Vue プロジェクトを作成します。
vue create testing-effect
プロジェクトディレクトリを入力します。次のコマンドを実行して、プロジェクトディレクトリに入ります。
cd testing-effect

ステップ 2: カスタムディレクティブを作成する
次に、タイプライターアニメーション効果を実現するカスタムディレクティブを作成します。 Vue では、Vue.directive メソッドを使用してカスタム命令を作成できます。具体的なコードは次のとおりです:

src フォルダーの下に directives フォルダーを作成します。

ディレクティブフォルダーに testingEffect.js ファイルを作成し、次のコードを追加します:

// typingEffect.js
export default {
  inserted: function (el, binding) {
 let text = binding.value;
 let delay = el.dataset.delay;
 let index = 0;
 el.innerHTML = '';

 function typeWriter() {
   if (index < text.length) {
     el.innerHTML += text.charAt(index);
     index++;
     setTimeout(typeWriter, delay);
   }
 }

 typeWriter();
  }
};

ログイン後にコピー

ステップ 3: カスタムディレクティブを登録する
Connect Next 、作成したばかりのカスタムディレクティブを Vue プロジェクトに登録する必要があります。次のコードを main.js ファイルに追加して、カスタム命令を登録します。

// main.js
import Vue from 'vue'
import App from './App.vue'
import typingEffect from './directives/typingEffect'

Vue.directive('typing', typingEffect)

new Vue({
  render: h => h(App),
}).$mount('#app')

ログイン後にコピー

ステップ 4: カスタムディレクティブを使用する
カスタムディレクティブを作成して登録したので、このディレクティブを Vue コンポーネントで使用して、タイプライターアニメーション効果を実現できます。

App.vue コンポーネントで、ディレクティブを使用する次のコードを追加します。

<template>
  <div>
    <h1 v-typing.data-delay="2000">Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  directives: {
    typing: {
      inserted: function (el, binding) {
        let text = binding.value;
        let delay = el.dataset.delay;
        let index = 0;
        el.innerHTML = '';

        function typeWriter() {
          if (index < text.length) {
            el.innerHTML += text.charAt(index);
            index++;
            setTimeout(typeWriter, delay);
          }
        }

        typeWriter();
      }
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、v-typing ディレクティブとパスを通じてタイプライターアニメーションの速度を制御します。データ遅延値。この例では、テキスト「Hello, World!」をコマンドに適用し、2000 ミリ秒でタイプライター効果を実行します。

ステップ 5: プロジェクトを実行する
最後に、Vue プロジェクトを実行し、ブラウザーでタイプライターアニメーション効果を確認できます。

ターミナルで次のコマンドを実行して Vue プロジェクトを実行します:

npm run serve

ログイン後にコピー

プロジェクトが正常に実行されたら、http://localhost:8080 にアクセスしてプロジェクトを表示できます (デフォルトのポートは8080) ブラウザーのタイプライターアニメーションの特殊効果。

概要
この記事では、Vue カスタム命令を使用してタイプライターアニメーション効果を実装する方法を学びました。カスタムディレクティブを作成し、これらのディレクティブを Vue コンポーネントで使用することにより、Web サイトにさまざまな動的な効果を簡単に追加できます。この記事が、Vue を使用してタイプライターアニメーション効果を実装する方法を理解するのに役立つことを願っています。

参考リンク：