Aタグクリックにロードアニメーションを追加してジャンプする方法は？

強化されたユーザーエクスペリエンス：タグロードアニメーションとページジャンプをクリックします

ユーザーエクスペリエンスを向上させるには、Aタグをクリックしてからターゲットページにジャンプした後、最初に簡単なロードアニメーションを表示する必要があります。この記事では、JavaScriptを使用してこの機能を実装する方法を紹介します。

ユーザーの要件：Aタグをクリックした後、ロードアニメーション効果を追加してから、アニメーションが終わった後にページにジャンプします。

HTMLを単純に使用します<a></a>タグはこの関数を実装できないため、ページリダイレクトのタイミングを制御するためにJavaScriptが必要です。 JavaScriptを使用して、タグのクリックイベントをインターセプトして、この効果を実現します。

解決策： onclickイベントハンドラー（ e.preventDefault() ）を介したタグのデフォルトsetTimeout動作をインターセプトし、ロードアニメーションを実行します（ここでは「...」です。 window.open()の実装の省略を表します）。

コード例：

 <a href="https://www.php.cn/link/15ea43997c9e00317564201ca5267210" onclick="onLinkClick(event)" target="_blank">クリックしてジャンプします</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转
    e.preventDefault();
    // 显示加载动画
    // ...  (此处添加您的加载动画代码，例如显示一个加载gif或修改CSS样式)
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
      // 隐藏加载动画 (如果需要，在此处添加隐藏动画的代码)
    }, 1000);
  }
</script>

このコードでは、 onLinkClick関数は最初にAタグのデフォルトジャンプ動作をブロックし、次にロードアニメーションを実行します（実際の状況に応じて「...」パーツを置き換える必要があります。CSSアニメーション、JavaScriptアニメーションライブラリまたはその他の方法を使用できます）。 target="_blank"新しいタブページでリンクが開くことを保証します。実際のニーズに応じてコードの「...」部分を交換し、適切な読み込みアニメーション効果を追加してください。

以上がAタグクリックにロードアニメーションを追加してジャンプする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。