Cara menggunakan CSS-IN-JS pada JavaScript

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Animasi merupakan salah satu fitur terbaik yang ada pada CSS untuk waktu yang lama. Pada akhirnya kita sadar, gerakan bisa meningkatkan pengalaman pengguna dan mendorong aksi di mana konteks statis tidak dapat melakukannya. Pada panduan ini, kita akan membuat sebuah prototipe untuk sebuah aplikasi menggunakan animasi CSS dan sentuhan JavaScript.

Apa yang Akan Kita Buat

Untuk latihan ini kita akan mengembangkan sebuah prototipe untuk sebuah aplikasi yang membiarkan pelanggan untuk mengikuti satu sama lainnya. PAda awalnya kita memuat daftar dari pengguna beserta nama-nya di bawah avatar yang bersangkutan. Avatar-avatar ini, ketika diklik akan memicu sebuah modal yang mengandung sebuah tombol "ikuti" dan informasi tambahan mengenai tiap pengguna.

Untuk keperluan demo, kita akan memuat hingga 30 pengguna menggunakan sebuah layanan gratis bernama Random User Generator. API mereka tidak hanya menyediakan gambar acak dari pengguna, namun juga menyediakan data acak seperti nama, alamat, surel dan lainnya.

1. Mengatur Panggung-nya

Saya telah mendiskusikan sebelumnya mengenai pilihan-pilihan untuk pembuatan konsep prototipe, tapi untuk artikel ini kita akan membuat sebuah prototipe dengan kdeo sungguhan. Untuk tugas ini kita akan menggunakan Marvel Devices; sebuah pustaka open source yang mengandung sebelas CSS ponsel murni untuk menamplkan prototipe yang dibuat dengan aplikasi Marvel.

Untuk memulainya, masukkan devices.min.css di bagian teratas dari dokumen, kembali ke demo dan pilih kombinasi yang kamu inginkan, lalu kopi dan salin HTML yang dibuat ke proyek-mu.

2. Memuat Pengguna-nya

Dengan CSS yang didapat untuk perangkat demo kita (Nexus 5) sekarang waktunya untuk mengerjakan pemuatan pada umpan pengguna aplikasi kita.

<div class="marvel-device nexus5">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
        <h3 class="title">Results</h3>
        <ul class="users"></ul>
    </div>
</div>

Pengguna-nya akan dimuat sebagai daftar dan dimasukkan ke unordered list .users. Ini adalah fondasi awalnya, namun kita harus menggunakan JavaScript untuk berkomunikasi dengan API random user untuk memasukkan daftar item ini. Untuk membuat permintaan ini kita akan menggunakan vanilla JavaScript ES6 Style yang sederhana.

let request = new XMLHttpRequest();

request adalah variabel yang akan mengandung permintaan AJAX kita, tapi dia membutuhkan sebuah URL untuk menyambungkannya.

request.open('GET', 'https://randomuser.me/api/?results=30', true);

Metode open akan mendapatkan API data dari URL dan parameter yang kita atur. Ada banyak parameter lainnya untuk digunakan, tapi untuk demo ini kita hanya akan mengambil 30 hasil. Sekarang kita memiliki URL kita pada tempatnya dan URL-nya terkirim, mari ambil data tersebut.

// Utility for DOM selection
function select(s) {
  return document.querySelector(s);
}

// Store for referencing
const users = select('.users'),

// AJAX Request
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    let data = JSON.parse(request.responseText),
        l    = data.results.length;

    for(var i = 0; i < l; i++) {
        // data results
        console.log(data.results[i]);
    }

  } else {
    alert('We reached our target server, but there was an error');
  }
};

request.onerror = function() {
  alert('There was a connection error of some sort')
};

// Send Ajax call
request.send();

Sekarang keseluruhan permintaan berada pada tempatnya. Buka konsol-nya dan kamu akan melihat semua hasil dari data yang disediakan terdaftar. Ini adalah permulaan yang bagus, tapi kita pasti harus melakukan lebih banyak lagi ketimbang hanya menampilkan hasilnya ke konsol.

3. Memasukkan Data Pengguna

Untuk bagian selanjutnya, kita akan memasukkan markup menggunakan data yang tersedia dari random user API.

users.insertAdjacentHTML('beforeend', '<li><img src="'+ 
                         data.results[i].picture.medium +'" data-pic="'+ 
                         data.results[i].picture.large +'" data-name="'+ 
                         data.results[i].name.first + ' ' + 
                         data.results[i].name.last + '" data-email="'+ 
                         data.results[i].email +'"><span class="user-name">'+ 
                         data.results[i].name.first +'</span></li>');

Baris kode di atas akan diletakkan pada pengulangan yang dibuat sebelumnya yang menampilkan data ke konsol. Seperti yang telah disebutkan, kita memiliki cukup banyak pilihan mengenai data terlampir pada objek user seperti nama pertama, surel, dan ukuran avatar. Gambar ukuran medium akan digunakan untuk tampilan awal. Sementara yang besar akan digunakan untuk modal yang dipicu ketika thumbnail avatar diklik. Semua bagian informasi ini akan disimpan di dalam atribut data sehingga kita bisa mengambilnya ketika dibutuhkan.

4. Mendeteksi Posisi Avatar

Kita akan membuat komponen lain untuk demo ini; sebuah modal yang terpicu dari titik eksekusi-nya (yaitu mengklik avatar). Kita membutuhkan matematika untuk menentukan dari mana modal-nya akan mengembang.

var transOriginNames = {
  webkitTransformOrigin : 'webkitTransformOrigin',
  MozTransformOrigin    : 'MozTransformOrigin',
  msTransformOrigin     : 'msTransformOrigin',
  transformOrigin       : 'transformOrigin'
};

users.addEventListener('click', function(e) {
  let target        = e.target,
      target_coords = target.getBoundingClientRect();

  if(target.nodeName === 'IMG') {
    for(var name in transOriginNames) {
      modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';
    }
  }
});

Untuk meraih pengembangan modal ini dari titik eksekusi kita harus memastikan transform-origin kita tepat agar perubahan ukuran modal terjadi secara tepat. Saya menggunakan object untuk menahan semua awalan transform-origin karena kita menggunakan JavaScript untuk mengatur mereka dan kita juga harus memastikan semua dasar-dasar terlingkupi untuk browser-browser yang tidak mendukung standarnya.

Catat matematika yang dibutuhkan untuk menentukan nilai transform-origin.

modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';

Diagram di atas menjelaskan secara visual cara matematika-nya dihitung. Untuk menentukan lokasi saat itu kita menggunakan offsetLeft dan offsetTop ditambah setengah dari width dan height untuk mencari titik tengah dari avatar. scrollTop juga sangat penting karena 30 pengguna akan meluapi batas dari layar perangkat dan offsetTop harus memndapatkan nilai ini terkurangi untuk menentukan jarak yang tepat dari bagian atas layar. Semua nilai dalam diagram di atas disediakan oleh teman kita getBoundingClientRect.

Tampilkan target_coords ke konsol, kamu akan melihat semua dimensi dan nilai yang kita butuhkan untuk membuat asumsi yang tepat. Nilai-nilai ini berkaitan dengan width dan height akan terus berubah tergantung posisi avatar di dalam layar perangkat.

5. Menganimasikan Modal-nya

Dengan avatar yang siap untuk menerima event klik kita. Ini saatnya untuk memberikan modal gerakan yang akan menampilkan profil pengguna.

.modal {
  transform: scale(0) translateZ(0);
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-property: transform, opacity;
  opacity: 0;
}

Kode di atas dipersingkat dari dem langsung-nya untuk menampilkan properti gerakan yang pasti akan kita gunakan. Kita pertama menyembunyikan menggunakan opacity dan scale.

Sekarang saatnya untuk menentukan properti CSS yang akan menangani keadaan aktid dari gerakan modal.

.screen.active .modal {
    transform: scale(1) translateZ(0);
    opacity: 1;
 }

Menggunakan JavaScript kita akan men-toggle class active di screen. Pada baris di atas kita membalik apa yang kita atur sebelumnya. Berikut cara kita membuat efek mengembang pada modal. Ini benar-benar ala gaya Google Material Design yang membantu dari perilaku yang mengganggu dan merespon input pengguna secara cepat dan tepat sehingga gerakannya responsif. Gaya ini juga mengonfirmasi input pengguna dengan mengembang secara cepat di titik kontak.

6. Memberi Avatar-Avatar Gerakan

Selama pemuatan kita akan membuat sebuah efek perubahan ukuran yang membuat urutan tidak terlalu statis dan lebih responsif. Tiap avatar akan berubah ukuran pada rentang yang berbeda dari yang di sebelahnya, untuk kita akan menggunakan CSS.

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes expand-out {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.users li {
    opacity: 0;
}

Pertama kita menyembunyikan pengguna dan men-toggle class show ketika permintaan AJAX-nya telah siap. Saya juga telah memasukkan keyframes kita yang akan merubah properti kita ke nilai yang tepat. Kita akan menggunakan keyframe ini pada intipan kode berikut yang menjalakan gerakannya.

$user-count: 30;
$duration: 200ms;
$stagger_delay: 0.0125s;
$easing: cubic-bezier(.66, .14, .83, .67);

.users.show {
  li {
    animation-duration: $duration;
    animation-name: fade-in;
    animation-fill-mode: both;
    animation-timing-function: $easing;
    opacity: 1;

    img {
      animation-duration: $duration;
      animation-name: expand-out;
      animation-fill-mode: both;
      animation-timing-function: $easing;
    }

    @for $i from 1 through $user-count {
      &:nth-of-type(#{$i}) {
        animation-delay: ($stagger_delay * $i);
        img {
          animation-delay: ($stagger_delay * $i);
        }
      }
    }
  }
}

Untuk mendapat bantuan dengan matematikannya saya menggunakan perulangan Sass dan variabel-variabel untuk menahan jumlah pengguna yang juga terikat dengan hasil JS dari panggilan random user API. Perulangannya adlah kunci dari seluruh puzzle karena dia akan berulang sesuai jumlah pengguna dan menambah nilai yang kita definisikan pada sebuah variabel.

Di atas adalah hasil dengan urutan animasi avatar final. Ingat kita hanya menggunakan animasi keyframes di CSS dan menggunakan JavaScript untuk men-toggle class show saat avatar-nya diterima dari random user API.

Penutup

Pastikan untuk melihat demo langsung karena di sana terdapat lemen tambahan yang menguntungkan seperti pemuat beranimasi yang akan tampil ketika sedang memuat dan hilang ketika pengguna-nya telah termuat.

Terima kasih kepada Shaw atas ilmu-nya dan cuplikan Dribbble ini yang digunakan sebagai inspirasi. Seperti biasa, tinggalkan komentar di bawah untuk diskusi lebih lanjut, dan berikan demo-nya beberapa hati di CodePen jika ingin melihat yang lebih banyak yang seperti ini!

Script dari JavaScript dapat ditempatkan pada bagian apa di HTML?

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Tag apa di dalam HTML yang digunakan untuk mendeklarasikan kode program JavaScript?

Bagaimana cara memanggil fungsi di JavaScript?