Bagaimana cara menambah animasi pemuatan ke klik tag dan kemudian melompat?

Pengalaman Pengguna Dipertingkatkan: Tag Klik pada Animasi Memuat dan Lompat Halaman

Untuk meningkatkan pengalaman pengguna, kami sering perlu memaparkan animasi pemuatan ringkas selepas mengklik pada tag, dan kemudian melompat ke halaman sasaran. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan ciri ini.

Keperluan Pengguna: Selepas mengklik pada tag, tambahkan kesan animasi pemuatan, dan kemudian lompat ke halaman selepas animasi selesai.

Menggunakan HTML semata -mata<a></a> Tags tidak dapat melaksanakan fungsi ini, jadi JavaScript diperlukan untuk mengawal masa pengalihan halaman. Kami akan menggunakan JavaScript untuk memintas klik peristiwa tag untuk mencapai kesan ini.

Penyelesaian: Memintas tingkah laku lompat lalai tag melalui pengendali acara onclick ( e.preventDefault() ), dan kemudian melaksanakan animasi pemuatan (di sini adalah "..." untuk mewakili peninggalan pelaksanaan animasi), dan akhirnya menggunakan fungsi setTimeout untuk membuka halaman sasaran selepas masa yang ditentukan (contohnya 1 saat), menggunakan kaedah window.open() .

Contoh kod:

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

Dalam kod ini, fungsi onLinkClick pertama menyekat tingkah laku lompat lalai dari tag, dan kemudian melaksanakan animasi pemuatan (anda perlu menggantikan bahagian "..." mengikut situasi sebenar, anda boleh menggunakan animasi CSS, perpustakaan animasi Javascript atau kaedah lain), dan akhirnya membuka pautan sasaran selepas 1 saat, dan anda boleh memilih secara selektif menyembunyikan animasi pemuatan. target="_blank" memastikan bahawa pautan dibuka di halaman tab baru. Sila ganti bahagian "..." kod mengikut keperluan sebenar anda dan tambahkan kesan animasi pemuatan yang sesuai.

Atas ialah kandungan terperinci Bagaimana cara menambah animasi pemuatan ke klik tag dan kemudian melompat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!