このチュートリアルでは、JavaScript を使用して CSS アニメーションを正確に制御し、テキストのコピーが成功した後の迅速な情報表示と自動非表示効果を?qū)g現(xiàn)する方法について詳しく説明します。アニメーションを 2 回トリガーできない問題の解決に重點を置き、モバイル互換性のベスト プラクティスを提供します。 CSS クラスとイベント リスニングに基づくソリューションを通じて、アニメーションのスムーズで反復(fù)可能な実行を保証できます。

最新の Web 開発では、豊かなユーザー エクスペリエンスを?qū)g現(xiàn)するために、JavaScript を使用して CSS アニメーションをトリガーおよび管理することが一般的に必要です。たとえば、ユーザーがボタンをクリックしてテキストをコピーすると、短い「コピーされました」というプロンプトがポップアップ表示され、數(shù)秒後に自動的に消えます。しかし、実際の運用では、モバイル端末上でアニメーションが繰り返し起動できなかったり、動作が異常だったりする問題に開発者が遭遇することがよくあります。このチュートリアルでは、アニメーションの信頼性とクロスプラットフォーム互換性を確保するための堅牢なソリューションを提供します。

1. テキストコピー機能の実裝

まず、テキストコピーの基本機能を?qū)g裝しましょう。これには通常、ターゲット テキストの取得、navigator.clipboard.writeText API の呼び出し、モバイル デバイスとの互換性の処理が含まれます。

関數(shù) copyTextAndShowAlert() {
  // 1. コピーするテキスト コンテンツを取得します const copyInput = document.querySelector(".offer-right__coupon input");
  if (!copyInput) {
    console.error("コピーソース入力ボックスが見つかりません。");
    戻る;
  }

  copyInput.select();
  // モバイル デバイスの場合は、テキストが完全に選択されていることを確認してください copyInput.setSelectionRange(0, 99999); 

  // 2. クリップボード API を使用してテキストをコピーする navigator.clipboard.writeText(copyInput.value)
    .then(() => {
      console.log("テキストがクリップボードに正常にコピーされました。");
      // コピーが成功したら、プロンプト アニメーションをトリガーします showAlertAnimation();
    })
    .catch(err => {
      console.error("テキストのコピーに失敗しました: ", err);
      //エラーメッセージを追加できます});
}

2. CSSアニメーションの定義

次に、プロンプト メッセージ (「コピー成功」など) の CSS スタイルとアニメーションを定義します。 「表示してから非表示にする」効果を?qū)g現(xiàn)するには、初期狀態(tài) (非表示)、表示狀態(tài) (不透明度 1)、および表示から非表示までのアニメーションが必要です。

 /*プロンプト情報の基本スタイル*/
.alert-クーポン {
    不透明度: 0; /* デフォルトでは非表示になります */
    可視性: 非表示; /* スペースを占有したりイベントを受信したりしないようにするための補助的な非表示*/
    トランジション: 不透明度 0.3 秒、イーズインアウト、可視性 0 秒、リニア 0.3 秒。 /* 初期表示遷移*/
    位置: 絶対; /* 実際のレイアウトに応じて調(diào)整します */
    /* 背景、色、フォントなどのその他のスタイル */
}

/* アニメーションがトリガーされるときに追加されるクラス */
.alert-coupon.show-hide-animation {
    不透明度: 1; /* すぐに表示します */
    可視性: 可視;
    アニメーション: HideText 1 秒イーズイン 2 秒進みます。 /* 2 秒遅れて非表示アニメーションを?qū)g行します*/
}

/*アニメーションのキーフレームを非表示にする*/
@keyframes 非表示テキスト {
  に {
    不透明度: 0;
    可視性: 非表示; /* アニメーションが終了したら完全に非表示にします*/
  }
}

/* 古い WebKit ブラウザ (一部のモバイル ブラウザなど) の互換性プレフィックス */
@-webkit-keyframes HideText {
  に {
    不透明度: 0;
    可視性: 非表示;
  }
}

注意すべき點:

• anime-fill-mode: forwards がキーで、これにより要素はアニメーション終了後もアニメーションの最後のフレームのスタイルを維持できます。
• Visibility: hidden と opacity: 0 を組み合わせると、より優(yōu)れた非表示効果が得られ、要素がレイアウトに參加せず、操作できないようになります。
• トランジションは初期表示時のスムーズな遷移に使用され、アニメーションは遅延非表示に使用されます。

3.アニメーションを2回トリガーできない問題を解決

element.style.animation = "..." を通じてアニメーション プロパティを直接設(shè)定します。アニメーションが終了すると、ブラウザは、たとえアニメーションを再設(shè)定したとしても、同じアニメーションを再実行する必要があるとは考えない場合があります。この問題を解決するベスト プラクティスは、JavaScript を通じて CSS クラスを動的に追加および削除することです。

アニメーションをトリガーする必要がある場合は、事前定義されたアニメーションを含む CSS クラスを追加します。アニメーションが終了したら、このクラスを削除して、次回アニメーションを再トリガーするときに再度追加できるようにします。 animeend イベントをリッスンして、アニメーションがいつ終了するかを知ることができます。

関數(shù) showAlertAnimation() {
  const textWasCopiedElement = document.querySelector(".offer-right__main .alert-coupon");
  if (!textWasCopiedElement) {
    console.error("プロンプト情報要素が見つかりません。");
    戻る;
  }

  // 1. 新しいアニメーションを開始する前に、存在する可能性のある古いアニメーション クラスを必ず削除してください。 // この手順は、特にアニメーションが中斷されたり、複數(shù)回トリガーされる可能性がある場合に重要です。

  // アニメーションが確実に再トリガーできるように、ブラウザにスタイルの再描畫/再計算を強制します。 // これは、要素のプロパティにアクセスしてブラウザを強制的に更新する一般的なハックです void textWasCopiedElement.offsetWidth; 

  // 2. アニメーションをトリガーするクラスを追加します。 textWasCopiedElement.classList.add("show-hide-animation");

  // 3. アニメーション終了イベントをリッスンしてクラスを削除し、次のトリガーの準備をします // 注: HideText アニメーションの継続時間は 1 秒、遅延は 2 秒であるため、合計継続時間は 3 秒です。
  // アニメーションの実行が終了すると、animationend イベントがトリガーされます。
  const animeDuration = 3000; // アニメーションの合計時間 (アニメーション 1 秒、遅延 2 秒)

  // setTimeout を使用して、animationend をシミュレートするか、animationend を直接リッスンします
  // animeend をリッスンする方が正確ですが、ブラウザのプレフィックスと複數(shù)のトリガーの問題に対処する必要があります。 // ここでは、setTimeout を使用して、クラス setTimeout(() => {
    textWasCopiedElement.classList.remove("アニメーションの表示/非表示");
    // アニメーションが終了したら、不透明度と可視性を初期狀態(tài)にリセットすることを検討できます。 textWasCopiedElement.style.opacity = "0";
    textWasCopiedElement.style.visibility = "非表示";
  }、アニメーションデュレーション);

  // より厳密なアニメーション終了監(jiān)視方法 (リスナーを削除する必要があります)
  // const handleAnimationEnd = () => {
  // textWasCopiedElement.classList.remove("show-hide-animation");
  // textWasCopiedElement.removeEventListener('animationend', handleAnimationEnd);
  // };
  // textWasCopiedElement.addEventListener('animationend', handleAnimationEnd);
}

コードの統(tǒng)合とサンプル HTML:

 
/*プロンプト情報の基本スタイル*/
.alert-クーポン {
    不透明度: 0; /* デフォルトでは非表示になります */
    可視性: 非表示; /* スペースを占有したりイベントを受信したりしないようにするための補助的な非表示*/
    トランジション: 不透明度 0.3 秒、イーズインアウト、可視性 0 秒、リニア 0.3 秒。 /* 初期表示遷移*/
    位置: 絶対; /* 実際のレイアウトに応じて調(diào)整します */
    トップ: 50%; /* 配置の例*/
    左: 50%。
    変換: 変換(-50%, -50%);
    背景色: #4CAF50;
    色: 白;
    パディング: 10px 20px;
    境界半徑: 5px;
    z インデックス: 1000;
    フォントサイズ: 14px;
    ホワイトスペース: ナラップ;
}

/* アニメーションがトリガーされるときに追加されるクラス */
.alert-coupon.show-hide-animation {
    不透明度: 1; /* すぐに表示します */
    可視性: 可視;
    アニメーション: HideText 1 秒イーズイン 2 秒進みます。 /* 2 秒遅れて非表示アニメーションを?qū)g行します*/
    -webkit-animation: HideText 1 秒イーズイン 2 秒前進; /* WebKit 互換*/
}

/*アニメーションのキーフレームを非表示にする*/
@keyframes 非表示テキスト {
  に {
    不透明度: 0;
    可視性: 非表示; /* アニメーションが終了したら完全に非表示にします*/
  }
}

/* 古い WebKit ブラウザ (一部のモバイル ブラウザなど) の互換性プレフィックス */
@-webkit-keyframes HideText {
  に {
    不透明度: 0;
    可視性: 非表示;
  }
}
スタイル>

<div class="offer-right__main">
  <div class="offer-right__coupon">
    <input type="text" value="PRIMEIRACOMPRA">
  </div>
  <button onclick="copyTextAndShowAlert()">割引コードをコピー</button>
  <div class="alert-coupon">コピーが成功しました。 </div>
</div>


関數(shù) copyTextAndShowAlert() {
  const copyInput = document.querySelector(".offer-right__coupon input");
  if (!copyInput) {
    console.error("コピーソース入力ボックスが見つかりません。");
    戻る;
  }

  copyInput.select();
  copyInput.setSelectionRange(0, 99999); // モバイルデバイスの場合

  navigator.clipboard.writeText(copyInput.value)
    .then(() => {
      console.log("テキストがクリップボードに正常にコピーされました。");
      showAlertAnimation();
    })
    .catch(err => {
      console.error("テキストのコピーに失敗しました: ", err);
      // エラー メッセージを追加できます。alert("コピーに失敗しました。手動でコピーしてください。");
    });
}

関數(shù) showAlertAnimation() {
  const textWasCopiedElement = document.querySelector(".offer-right__main .alert-coupon");
  if (!textWasCopiedElement) {
    console.error("プロンプト情報要素が見つかりません。");
    戻る;
  }

  // 1. 新しいアニメーションを開始する前に、存在する可能性のある古いアニメーション クラスを必ず削除してください。 textWasCopiedElement.classList.remove("show-hide-animation");

  // アニメーションが確実に再トリガーできるように、ブラウザにスタイルの再描畫/再計算を強制します。 // これは、要素のプロパティにアクセスしてブラウザを強制的に更新する一般的なハックです void textWasCopiedElement.offsetWidth; 

  // 2. アニメーションをトリガーするクラスを追加します。 textWasCopiedElement.classList.add("show-hide-animation");

  // 3. アニメーション終了イベントをリッスンしてクラスを削除し、次のトリガーの準備をします // 合計アニメーション期間 = アニメーション期間 アニメーション遅延時間 = 1 秒 2 秒 = 3 秒
  const animeTotalDuration = 3000; 

  setTimeout(() => {
    textWasCopiedElement.classList.remove("アニメーションの表示/非表示");
    // アニメーションが終了したら、要素が初期の非表示狀態(tài)に戻ることを手動で確認します。 textWasCopiedElement.style.opacity = "0";
    textWasCopiedElement.style.visibility = "非表示";
  }、animationTotalDuration);
}

4. モバイル互換性に関する考慮事項

最初の質(zhì)問では、モバイル アニメーションが機能しないと述べられていましたが、後にキャッシュの問題であると指摘されました。しかし、実際の開発においては、モバイル互換性は確かに注意が必要な焦點です。

• CSS プレフィックス:最近のブラウザは標準 CSS プロパティのサポートがますます向上していますが、古いまたは特定のモバイル ブラウザ (特定の Android WebKit カーネルなど) との互換性を確保するために、@keyframes およびアニメーション プロパティに -webkit- プレフィックスを追加することをお勧めします。通常、このプロセスは、Autoprefixer を備えた Webpack などのビルド ツールを使用して自動化できます。
• animeend イベント: animationend イベントは、ブラウザごとにサポートとトリガーのタイミングが若干異なる場合があります。問題が発生した場合は、setTimeout を使用してアニメーションの終了をシミュレートすることを検討してください。上記の例に示すように、その期間は CSS で定義されているアニメーション期間とアニメーション遅延の合計と一致する必要があります。
• タッチ イベントとクリック イベント:ボタンの onclick イベントがモバイル端末で正常に応答できることを確認します。最近のモバイル ブラウザは通常、タッチ イベントをクリック イベントに変換しますが、場合によっては遅延や応答不能が発生することがあります。
• ビューポートとスケーリング:モバイル レイアウトやアニメーションに関する予期せぬ問題を防ぐために、ページに正しいビューポート設(shè)定があることを確認してください。

要約する

このチュートリアルを通じて、JavaScript と CSS クラスを活用して繰り返し可能な UI アニメーションを作成する方法を?qū)Wびました。鍵は次のとおりです。

1. アニメーションの狀態(tài)を管理するには、element.style.animation プロパティを直接操作する代わりに、CSS クラスを使用します。
2. ブラウザに再描畫を強制する:アニメーション クラスを削除した後、アニメーションを確実に再トリガーできるように、offsetWidth などのプロパティにアクセスしてブラウザに再描畫を強制します。
3. アニメーションの終了を監(jiān)視する:アニメーションが終了した後、animationend イベントまたは setTimeout を使用してアニメーション クラスを削除し、次のトリガーに備えます。
4. ブラウザーのプレフィックスと互換性を考慮します。特にモバイルでは、CSS プレフィックスの正しい使用とイベント リスニングの信頼性を確認してください。

これらのベスト プラクティスに従うことで、より安定し、効率的で、優(yōu)れたユーザー エクスペリエンスを備えた動的 Web インターフェイスを構(gòu)築できるようになります。

以上がJavaScript による CSS アニメーションの制御: モバイル テキスト コピー プロンプトとアニメーション リセット手法の実裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。