Comment ajouter une animation de chargement à la balise A Cliquez puis sauter?

Expérience utilisateur améliorée: une balise cliquez sur l'animation de chargement et le saut de page

Afin d'améliorer l'expérience utilisateur, nous devons souvent afficher d'abord une brève animation de chargement après avoir cliqué sur la balise A, puis passer à la page cible. Cet article présentera comment utiliser JavaScript pour implémenter cette fonctionnalité.

Exigences de l'utilisateur: après avoir cliqué sur la balise A, ajoutez un effet d'animation de chargement, puis sautez à la page une fois l'animation terminée.

Utilisation de HTML simplement<a></a> Les balises ne peuvent pas implémenter cette fonction, donc JavaScript est nécessaire pour contrôler le moment de la redirection de la page. Nous utiliserons JavaScript pour intercepter les événements de clic d'une balise pour réaliser cet effet.

Solution: intercepter le comportement de saut par défaut d'une balise via le gestionnaire d'événements onclick ( e.preventDefault() ), puis exécuter l'animation de chargement (voici "..." pour représenter l'omission de l'implémentation d'animation), et enfin utiliser la fonction setTimeout pour ouvrir la page cible après l'heure spécifiée (par exemple 1 seconde), en utilisant window.open() .

Exemple de code:

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

Dans ce code, la fonction onLinkClick bloque d'abord le comportement de saut par défaut de la balise A, puis exécute l'animation de chargement (vous devez remplacer la partie "..." selon la situation réelle, vous pouvez utiliser l'animation CSS, la bibliothèque d'animation JavaScript ou d'autres méthodes), et enfin ouvrir le lien cible après 1 seconde, et vous pouvez masquer sélectivement l'animation de chargement. target="_blank" garantit que le lien s'ouvre dans la nouvelle page d'onglet. Veuillez remplacer la partie "..." du code en fonction de vos besoins réels et ajouter des effets d'animation de chargement appropriés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!