Wie füge ich das Laden von Animationen zum A -Tag hinzu und springe dann?

Erweiterte Benutzererfahrung: Ein Tag Klicken Sie auf die Animation und den Seitensprung

Um das Benutzererlebnis zu verbessern, müssen wir häufig zuerst eine kurze Ladeanimation anzeigen, nachdem wir auf das A -Tag geklickt haben, und dann zur Zielseite springen. In diesem Artikel wird vorgestellt, wie JavaScript verwendet wird, um diese Funktion zu implementieren.

Benutzeranforderungen: Fügen Sie nach dem Klicken auf das A -Tag einen Ladeanimationseffekt hinzu und springen Sie dann zur Seite, nachdem die Animation vorbei ist.

Einfach HTML verwenden<a></a> Tags können diese Funktion nicht implementieren, daher ist JavaScript erforderlich, um den Zeitpunkt der Seitenumleitung zu steuern. Wir werden JavaScript verwenden, um die Klick -Ereignisse eines Tags abzufangen, um diesen Effekt zu erzielen.

Lösung: Fangen Sie das Standard -Sprungverhalten eines Tags durch den onclick -Ereignishandler ( e.preventDefault() ) ab und führen Sie dann die Ladeanimation aus (hier ist "...", um die Auslassung der Animationsimplementierung darzustellen) und verwenden Sie schließlich die setTimeout -Funktion, um die Zielseite nach der angegebenen Zeit zu öffnen (z. B. 1 Sekunde). Verwenden window.open() -Methode.

Codebeispiel:

 <a href="https://www.php.cn/link/15ea43997c9e00317564201ca5267210" onclick="onLinkClick(event)" target="_blank">Klicken Sie zum Springen</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>

In diesem Code blockiert die onLinkClick -Funktion zunächst das Standardsprungverhalten des A -Tags und führt dann die Ladeanimation aus (Sie müssen den Teil "..." entsprechend der tatsächlichen Situation ersetzen, Sie können die CSS -Animation verwenden, JavaScript -Animationsbibliothek oder andere Methoden schließlich öffnen) und öffnen schließlich die Ziellink nach 1 Sekunde und können die Ladeanimation selektiv verbergen. target="_blank" stellt sicher, dass der Link auf der neuen Registerkartenseite geöffnet wird. Bitte ersetzen Sie den "..." -Teil des Codes entsprechend Ihren tatsächlichen Anforderungen und fügen Sie geeignete Ladeanimationseffekte hinzu.

Das obige ist der detaillierte Inhalt vonWie füge ich das Laden von Animationen zum A -Tag hinzu und springe dann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!