Menganimasikan Antara Tampilan

Pelajari cara menganimasikan antar dua tampilan dalam aplikasi Anda.

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

  • Gunakan terjemahan untuk berpindah antartampilan; hindari menggunakan left, top, atau properti lainnya yang memicu tata letak.
  • Pastikan setiap animasi yang Anda gunakan cepat dan berdurasi pendek.
  • Pertimbangkan bagaimana animasi dan tata letak Anda berubah ketika ukuran layar semakin besar; apa yang bekerja dengan baik pada layar yang lebih kecil, mungkin akan terlihat aneh ketika digunakan pada desktop.

Bagaimana transisi tampilan ini terlihat dan berperilaku akan bergantung pada tipe tampilan yang Anda hadapi. Misalnya, menganimasikan overlay modal di atas tampilan sebaiknya terlihat berbeda dibandingkan transisi antara tampilan daftar dan tampilan detail.

Menggunakan terjemahan untuk berpindah di antara tampilan

Menerjemahkan antara dua tampilan.

Untuk mempermudah, asumsikan bahwa ada dua tampilan: tampilan daftar dan tampilan detail. Saat pengguna mengetuk daftar item dalam tampilan daftar, tampilan detail bergeser ke dalam, dan tampilan daftar bergeser ke luar.

Hierarki tampilan.

Untuk memperoleh efek ini, Anda memerlukan penampung bagi kedua tampilan tersebut dengan overflow: hidden yang telah ditetapkan di atasnya. Dengan begitu, dua tampilan tersebut bisa berdampingan di dalam kontainer tanpa menampilkan scrollbar horizontal, dan setiap tampilan bisa bergeser dari sisi-ke-sisi ketika diperlukan.

CSS untuk kontainer adalah:

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

Posisi penampung ditetapkan sebagai relative. Ini berarti bahwa setiap tampilan di dalamnya dapat diposisikan secara mutlak ke sudut kiri atas dan kemudian dipindahkan dengan transformasi. Pendekatan ini lebih menguntungkan untuk kinerja daripada menggunakan properti left (karena hal itu memicu tata letak dan gambar), 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 pada properti transform memberikan efek geser yang bagus. Untuk memberikan nuansa yang bagus, digunakan kurva cubic-bezier kustom, yang kita bahas dalam Panduan Easing Khusus.

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

Tampilan di luar layar harus diterjemahkan ke kanan, sehingga tampilan detail harus dipindahkan:

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

Sekarang sejumlah kecil JavaScript diperlukan untuk menangani class. Tindakan ini akan 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 memperluasnya untuk mencakup beberapa tampilan, dan konsep dasarnya harus tetap sama; setiap tampilan yang tidak terlihat harus berada di luar layar dan ditampilkan saat diperlukan, dan tampilan yang saat ini aktif di layar harus dialihkan keluar.

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

Pastikan animasi Anda berjalan pada layar yang lebih besar

Hierarki tampilan pada perangkat layar besar.

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