Saya mencoba mengubah CSS tautan sebelum aplikasi menavigasi ke halaman lain. Saya sebelumnya telah menambahkan peristiwa ontouchstart ke elemen tautan untuk sangat mempercepat navigasi di aplikasi. Masalahnya adalah bahwa acara tersebut diaktifkan dan aplikasi dinavigasi sebelum CSS dapat berubah.

Apa saja cara saya dapat memberikan umpan balik pengguna sebelum halaman berubah?

Catatan tambahan:

  • Ini adalah SPA yang dibangun menggunakan AngularJS dan PhoneGap Build.
  • Saya menemukan bahwa menggunakan button:active hanya akan diaktifkan setelah tombol diklik sehingga halaman akan bernavigasi sebelum CSS berubah.
  • Saya yakin ini perlu diuji pada perangkat layar sentuh untuk melihat efeknya.
  • Ini adalah pertanyaan pertama saya di sini jadi harap lembut :)

Berikut adalah beberapa contoh kode:

HTML

<a class="button" ontouchstart="goTo('#!/stats', 'buttonActive', this);" onclick="goTo('#!/stats', 'buttonActive', this);">STATS</a>

CSS

.button {
    display: flex;
    background-color: #000000; 
    color: dodgerblue;
    font-size: 4vmin;
    cursor: pointer;
    text-decoration: none;
    font-size: 7vmin;
    border: 0.75vmin solid dodgerblue;
    border-radius: 1vmin;
    height: 8vh;
    width: 40vmin;
    padding: 2vmin;
    margin: 5vmin auto;
    align-items: center;
    justify-content: center;
}
.buttonActive {
    background-color: dodgerblue;
    color: white;
}

JS

function goTo (location, addClass, elem) {
    elem.className += addClass;
    window.location.href = location;
}
1
Dominic Nguyen 20 Agustus 2017, 21:10

2 jawaban

Jawaban Terbaik

Saya akhirnya menggunakan ontouchend alih-alih ontouchstart. Ini memungkinkan CSS untuk berubah saat jari pengguna ditekan ke bawah dan halaman tidak akan bernavigasi sampai pengguna melepaskan jarinya.

1
Dominic Nguyen 14 September 2017, 20:20

Anda mungkin bisa menambahkan sedikit penundaan pada panggilan window.location.href fungsi goTo. Ini akan memberi waktu css untuk memperbarui sebelum file baru diminta. Mungkin terlihat seperti ini:

function goTo (location, addClass, elem) {
  elem.className += addClass;
  setTimeout(function(){ 
    window.location.href = location;
  }, 250);
}

Itu akan membuat penundaan 250 milidetik...mungkin cukup waktu untuk memungkinkan css memperbarui dan pemirsa Anda mengenali perubahan sebelum permintaan file baru dimulai.

0
Gray Spectrum 20 Agustus 2017, 22:54