Menganimasikan Antara Tampilan

Pelajari cara menganimasikan antara dua tampilan di aplikasi Anda.

Sering kali, Anda ingin memindahkan pengguna di antara tampilan dalam aplikasi, apakah itu dari daftar ke tampilan detail, atau menampilkan navigasi sidebar. Animasi antara tampilan-tampilan ini membuat pengguna tetap terlibat dan membuat proyek Anda menjadi lebih hidup.

  • Gunakan terjemahan untuk berpindah di antara tampilan; hindari penggunaan left, top, atau properti lainnya yang memicu tata letak.
  • Pastikan animasi yang Anda gunakan cepat dan berdurasi pendek.
  • Pertimbangkan bagaimana animasi dan tata letak Anda berubah ketika ukuran layar naik; apa yang berfungsi untuk layar yang lebih kecil mungkin terlihat aneh ketika digunakan dalam konteks desktop.

Bagaimana transisi tampilan ini terlihat dan berperilaku bergantung pada jenis tampilan yang Anda hadapi. Misalnya, menganimasikan overlay modal di atas tampilan harus berbeda dari transisi antara tampilan daftar dan detail.

Gunakan terjemahan untuk berpindah di antara tampilan

Menerjemahkan di antara dua tampilan.

Untuk memudahkan, asumsikan bahwa ada dua tampilan: tampilan daftar dan tampilan detail. Saat pengguna mengetuk item daftar di dalam tampilan daftar, tampilan detail akan bergeser masuk, dan tampilan daftar akan bergeser keluar.

Hierarki tampilan.

Untuk mencapai efek ini, Anda memerlukan penampung untuk kedua tampilan yang telah menetapkan overflow: hidden. Dengan begitu, kedua tampilan tersebut bisa berada di dalam container secara berdampingan tanpa menampilkan scrollbar horizontal, dan setiap tampilan dapat bergeser dari sisi ke sisi di dalam container sesuai kebutuhan.

CSS untuk penampung adalah:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

Posisi penampung ditetapkan sebagai relative. Ini berarti setiap tampilan di dalamnya bisa diposisikan ke sudut kiri atas secara mutlak, lalu diubah dengan transformasi. Pendekatan ini lebih baik untuk performa daripada menggunakan properti left (karena hal tersebut memicu tata letak dan paint), dan biasanya lebih mudah untuk dirasionalisasi.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Menambahkan transition di properti transform memberikan efek slide yang bagus. Untuk memberikan nuansa yang bagus, kode ini menggunakan kurva cubic-bezier kustom, yang telah kita bahas di panduan Easing Kustom.

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

Tampilan yang berada di luar layar harus diterjemahkan ke kanan, sehingga dalam hal ini tampilan detail perlu dipindahkan:

.details-view {
  transform: translateX(100%);
}

Sekarang sejumlah kecil JavaScript diperlukan untuk menangani class. Ini mengalihkan class yang sesuai pada tampilan.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Terakhir, kita tambahkan deklarasi CSS untuk class tersebut.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Cobalah

Anda dapat meluaskan ini untuk mencakup beberapa tampilan, dan konsep dasarnya harus tetap sama; setiap tampilan yang tidak terlihat harus berada di balik layar dan ditampilkan sesuai kebutuhan, dan tampilan saat ini di layar harus dipindahkan.

Selain transisi antar tampilan, teknik ini juga dapat diterapkan ke elemen geser-masuk lainnya, seperti elemen navigasi bilah sisi. Satu-satunya perbedaan nyata adalah Anda tidak perlu memindahkan tampilan lain.

Pastikan animasi Anda berfungsi di layar yang lebih besar

Hierarki tampilan di layar besar.

Untuk layar yang lebih besar, Anda harus selalu menampilkan tampilan daftar daripada menghapusnya, dan menggeser tampilan detail dari sisi kanan. Ini hampir sama seperti menangani tampilan navigasi.