Menganimasikan Tampilan Modal

Tampilan modal memblokir antarmuka pengguna untuk menampilkan pesan penting. Pelajari cara menganimasikan tampilan modal di aplikasi Anda.

Menganimasikan tampilan modal.
Coba

Tampilan modal adalah untuk pesan penting, dan Anda memiliki alasan yang sangat bagus untuk memblokir antarmuka pengguna. Gunakan dengan hati-hati, karena dapat mengganggu dan dapat dengan mudah merusak pengalaman pengguna jika digunakan secara berlebihan. Namun, dalam beberapa situasi, mereka adalah pilihan tampilan yang tepat, dan menambahkan beberapa animasi akan membuatnya terlihat hidup.

  • Gunakan tampilan modal seperlunya; pengguna akan frustrasi jika Anda mengganggu pengalaman mereka dengan cara yang tidak perlu.
  • Menambahkan skala pada animasi memberikan efek "penurunan" yang bagus.
  • Membuang tampilan modal dengan cepat ketika pengguna menutupnya. Namun, tampilkan tampilan modal ke layar sedikit lebih lambat sehingga tidak mengejutkan pengguna.

Overlay modal harus sejajar dengan area pandang, jadi setel position-nya ke fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Kode ini memiliki opacity awal 0 sehingga disembunyikan dari tampilan, tetapi juga perlu pointer-events ditetapkan ke none sehingga klik dan sentuhan akan melewatinya. Tanpa itu, sistem akan memblokir semua interaksi, yang merender seluruh halaman secara tidak responsif. Terakhir, karena menganimasikan opacity dan transform, keduanya harus ditandai sebagai berubah dengan will-change (lihat juga Menggunakan properti will-change).

Saat terlihat, tampilan harus menerima interaksi dan memiliki opacity bernilai 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Sekarang, setiap kali tampilan modal diperlukan, Anda dapat menggunakan JavaScript untuk mengganti class "visible":

modal.classList.add('visible');

Pada tahap ini, tampilan modal akan muncul tanpa animasi apa pun, sehingga Anda kini dapat menambahkannya (lihat juga Easing Kustom):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Menambahkan scale ke transformasi akan membuat tampilan tampak turun sedikit ke layar, yang merupakan efek bagus. Transisi default berlaku untuk properti transformasi dan opasitas dengan kurva kustom dan durasi 0,1 detik.

Durasinya cukup singkat, tetapi itu ideal saat pengguna menutup tampilan dan ingin kembali ke aplikasi Anda. Kelemahannya adalah durasi itu mungkin terlalu agresif saat tampilan modal muncul. Untuk memperbaiki masalah ini, ganti nilai transisi untuk class visible:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Sekarang tampilan modal membutuhkan waktu 0,3 detik untuk muncul ke layar, yang sedikit kurang agresif, tetapi ditutup dengan cepat, yang akan disukai pengguna.