Dalam pengembangan aplikasi web modern, animasi dan transisi memainkan peran penting dalam menciptakan pengalaman pengguna yang menarik dan interaktif. HTMX dirancang untuk memungkinkan Anda menggunakan transisi CSS untuk menambahkan animasi dan transisi yang halus ke halaman web hanya dengan menggunakan CSS dan HTML. Dalam bab ini, kita akan mempelajari berbagai teknik animasi yang dapat diterapkan menggunakan HTMX.
9.1 Animasi CSS Dasar
9.1.1 Animasi Perubahan Warna
Teknik animasi paling sederhana dalam HTMX adalah dengan menjaga kestabilan ID sebuah elemen saat terjadi pertukaran konten. Jika ID elemen dijaga tetap stabil, HTMX akan melakukan pertukaran sedemikian rupa sehingga transisi CSS dapat diterapkan antara versi lama dan versi baru dari elemen tersebut.
Contoh:
<style>
.smooth {
transition: all 1s ease-in;
}
</style>
<div
id="color-demo"
class="smooth"
style="color:red"
hx-get="/colors"
hx-swap="outerHTML"
hx-trigger="every 1s"
>
Demo Perubahan Warna
</div>
Div ini akan melakukan polling setiap detik dan akan diganti dengan konten baru yang mengubah nilai style warna menjadi nilai baru (misalnya biru):
<div
id="color-demo"
class="smooth"
style="color:blue"
hx-get="/colors"
hx-swap="outerHTML"
hx-trigger="every 1s"
>
Demo Perubahan Warna
</div>
Karena div memiliki ID yang stabil, yaitu color-demo, HTMX akan mengatur struktur pertukaran sedemikian rupa sehingga transisi CSS, yang didefinisikan pada kelas .smooth, diterapkan pada perubahan style dari merah ke biru, dan secara halus melakukan transisi di antara keduanya.
9.1.2 Progress Bar yang Halus
Demo Progress Bar juga menggunakan teknik animasi CSS dasar ini dengan memperbarui properti panjang dari elemen progress bar, sehingga memungkinkan animasi yang halus.
9.2 Transisi Pertukaran
9.2.1 Fade Out saat Pertukaran
Jika Anda ingin melakukan fade out pada elemen yang akan dihapus saat permintaan berakhir, Anda dapat memanfaatkan kelas htmx-swapping dengan beberapa CSS dan memperpanjang fase pertukaran agar cukup lama untuk animasi Anda selesai. Ini dapat dilakukan seperti berikut:
<style>
.fade-me-out.htmx-swapping {
opacity: 0;
transition: opacity 1s ease-out;
}
</style>
<button
class="fade-me-out"
hx-delete="/fade_out_demo"
hx-swap="outerHTML swap:1s"
>
Fade Me Out
</button>
9.3 Transisi Penyelesaian
9.3.1 Fade In saat Penambahan
Melanjutkan contoh sebelumnya, kita dapat melakukan fade in pada konten baru dengan menggunakan kelas htmx-added selama fase penyelesaian. Anda juga dapat menulis transisi CSS pada target, bukan pada konten baru, dengan menggunakan kelas htmx-settling.
<style>
#fade-me-in.htmx-added {
opacity: 0;
}
#fade-me-in {
opacity: 1;
transition: opacity 1s ease-out;
}
</style>
<button id="fade-me-in" hx-post="/fade_in_demo" hx-swap="outerHTML settle:1s">
Fade Me In
</button>
9.4 Animasi Permintaan Sedang Berlangsung
Anda juga dapat memanfaatkan kelas htmx-request, yang diterapkan pada elemen yang memicu permintaan. Di bawah ini adalah contoh formulir yang akan mengubah tampilannya untuk menunjukkan bahwa permintaan sedang diproses saat dikirimkan:
<style>
form.htmx-request {
opacity: 0.5;
transition: opacity 300ms linear;
}
</style>
<form hx-post="/name" hx-swap="outerHTML">
<label>Nama:</label><input name="name" /><br />
<button>Kirim</button>
</form>
9.5 Menggunakan Ekstensi class-tools HTMX
Banyak animasi menarik yang dapat dibuat dengan menggunakan ekstensi class-tools.
Berikut adalah contoh yang mengalihkan opasitas sebuah div. Perhatikan bahwa kita mengatur waktu alih menjadi sedikit lebih lama daripada waktu transisi. Ini menghindari kedipan yang dapat terjadi jika transisi terganggu oleh perubahan kelas.
<style>
.demo.faded {
opacity: 0.3;
}
.demo {
opacity: 1;
transition: opacity ease-in 900ms;
}
</style>
<div class="demo" classes="toggle faded:1s">Toggle Demo</div>
9.6 Menggunakan View Transition API
HTMX menyediakan akses ke View Transition API baru melalui opsi transition pada atribut hx-swap.
Di bawah ini adalah contoh pertukaran yang menggunakan transisi tampilan. Transisi terkait dengan div luar melalui properti view-transition-name dalam CSS, dan transisi itu didefinisikan dalam ::view-transition-old dan ::view-transition-new, menggunakan @keyframes untuk menentukan animasi. (Detail lebih lengkap tentang View Transition API dapat ditemukan di Halaman Pengembang Chrome.)
Dalam transisi ini, konten lama harus meluncur keluar ke kiri dan konten baru harus meluncur masuk dari kanan.
Perhatikan bahwa, pada saat penulisan ini, transisi visual hanya akan terjadi di Chrome 111+, tetapi lebih banyak browser diharapkan untuk mengimplementasikan fitur ini dalam waktu dekat.
<style>
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-right {
from {
transform: translateX(90px);
}
}
@keyframes slide-to-left {
to {
transform: translateX(-90px);
}
}
.slide-it {
view-transition-name: slide-it;
}
::view-transition-old(slide-it) {
animation:
180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
animation:
420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
</style>
<div class="slide-it">
<h1>Konten Awal</h1>
<button
hx-get="/new-content"
hx-swap="innerHTML transition:true"
hx-target="closest div"
>
Ganti!
</button>
</div>
9.7 Menggunakan Kelas CSS Khusus HTMX
HTMX menyediakan beberapa kelas CSS khusus yang dapat kita gunakan untuk menerapkan animasi dan transisi pada elemen yang diperbarui oleh HTMX. Berikut adalah beberapa kelas CSS yang sering digunakan:
-
htmx-swapping: Kelas ini diterapkan pada elemen target saat konten sedang diperbarui oleh HTMX. Kita dapat menggunakan kelas ini untuk menerapkan animasi atau transisi saat konten sedang dimuat..htmx-swapping { opacity: 0; transition: opacity 0.5s ease-in-out; } -
htmx-settling: Kelas ini diterapkan pada elemen target setelah konten selesai diperbarui dan sebelum transisi selesai. Kita dapat menggunakan kelas ini untuk menerapkan animasi atau transisi tambahan setelah konten dimuat..htmx-settling { opacity: 1; transition: opacity 0.5s ease-in-out; } -
htmx-added: Kelas ini diterapkan pada elemen baru yang ditambahkan ke dalam DOM oleh HTMX. Kita dapat menggunakan kelas ini untuk menerapkan animasi atau transisi saat elemen baru muncul..htmx-added { animation: fade-in 0.5s ease-in-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
Dengan menggunakan kelas-kelas CSS ini, kita dapat dengan mudah menerapkan animasi dan transisi pada elemen yang diperbarui oleh HTMX, memberikan pengalaman pengguna yang lebih menarik dan responsif.
9.8 Menerapkan Animasi dan Transisi pada Pemuatan Konten
Salah satu keuntungan utama menggunakan HTMX adalah kemampuannya untuk memuat konten secara dinamis tanpa memuat ulang seluruh halaman. Namun, pemuatan konten yang tiba-tiba dapat terasa janggal bagi pengguna. Dengan menerapkan animasi dan transisi pada pemuatan konten, kita dapat membuat pengalaman pengguna lebih halus dan menyenangkan.
Berikut adalah contoh penerapan animasi fade-in saat memuat konten baru dengan HTMX:
<div id="content">
<!-- Konten awal -->
</div>
<button hx-get="/load-content" hx-target="#content">Muat Konten Baru</button>
<style>
#content {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#content.htmx-swapping {
opacity: 0;
}
</style>
Dalam contoh di atas, ketika tombol “Muat Konten Baru” diklik, HTMX akan memuat konten baru dari /load-content dan menggantinya ke dalam elemen dengan id content. Saat konten sedang dimuat, kelas htmx-swapping akan diterapkan pada elemen #content, memicu transisi fade-out. Setelah konten selesai dimuat, kelas htmx-swapping akan dihapus, memicu transisi fade-in yang halus.
Dengan menerapkan animasi dan transisi seperti ini, kita dapat menciptakan pengalaman pemuatan konten yang lebih menarik dan tidak terlalu mengganggu bagi pengguna.
9.9 Menggunakan Transisi Sisi Server dengan HTMX
Selain animasi dan transisi sisi klien, HTMX juga mendukung transisi sisi server yang memungkinkan kita untuk mengontrol animasi dan transisi dari server. Dengan menggunakan header respons khusus, kita dapat menentukan bagaimana konten baru harus dianimasikan saat diperbarui oleh HTMX.
Berikut adalah contoh penggunaan transisi sisi server dengan HTMX:
from flask import Flask, make_response
app = Flask(__name__)
@app.route('/load-content')
def load_content():
content = '''
<div>
<h2>Konten Baru</h2>
<p>Ini adalah konten baru yang dimuat dari server.</p>
</div>
'''
response = make_response(content)
response.headers['HX-Transition'] = 'slide-left'
return response
Dalam contoh di atas, ketika rute /load-content diakses, server akan mengembalikan konten baru dalam respons. Namun, sebelum mengembalikan respons, kita menambahkan header HX-Transition dengan nilai slide-left. Header ini memberitahu HTMX untuk menerapkan transisi slide-left saat memuat konten baru.
Untuk menggunakan transisi sisi server ini, kita perlu mendefinisikan gaya CSS yang sesuai untuk transisi slide-left. Contohnya:
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-enter-active {
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.slide-left-leave {
transform: translateX(0);
}
.slide-left-leave-active {
transform: translateX(-100%);
transition: transform 0.5s ease-in-out;
}
Dengan menerapkan gaya CSS ini, konten baru akan masuk dari sisi kanan dan menggeser konten lama ke kiri saat dimuat.
Transisi sisi server memberikan kontrol yang lebih fleksibel kepada kita untuk menentukan bagaimana konten harus dianimasikan berdasarkan logika server. Kita dapat menggunakan berbagai jenis transisi seperti fade, slide-up, slide-down, dan lain-lain, sesuai dengan kebutuhan aplikasi kita.
9.10 Mengoptimalkan Kinerja Animasi
Saat menerapkan animasi dan transisi pada aplikasi web, penting untuk mempertimbangkan kinerja dan memastikan bahwa animasi berjalan dengan mulus tanpa mengganggu pengalaman pengguna. Berikut adalah beberapa tips untuk mengoptimalkan kinerja animasi:
-
Gunakan properti CSS yang dapat diakselerasi perangkat keras seperti
transformdanopacityuntuk animasi. Properti ini dapat dirender secara efisien oleh browser dan memberikan kinerja yang lebih baik dibandingkan dengan properti lain sepertileftatautop. -
Batasi jumlah elemen yang dianimasi secara bersamaan. Semakin banyak elemen yang dianimasi, semakin berat beban pada browser. Fokuskan pada menganimasi elemen-elemen kunci yang memberikan dampak visual yang signifikan.
-
Gunakan transisi dan animasi dengan durasi yang sesuai. Animasi yang terlalu lama dapat membuat pengguna merasa bosan, sementara animasi yang terlalu cepat dapat terlewatkan. Pilihlah durasi yang sesuai dengan jenis animasi dan konteksnya.
-
Pertimbangkan untuk menggunakan library atau framework animasi yang telah dioptimalkan, seperti GreenSock (GSAP) atau Velocity.js, untuk animasi yang lebih kompleks. Library ini menyediakan performa yang baik dan fitur-fitur tambahan yang dapat mempermudah pembuatan animasi.
-
Lakukan pengujian pada berbagai perangkat dan browser untuk memastikan animasi berjalan dengan lancar dan konsisten. Perhatikan juga pengguna dengan perangkat yang memiliki kemampuan yang lebih rendah.
Dengan mempertimbangkan kinerja dan mengoptimalkan animasi, kita dapat memberikan pengalaman pengguna yang lebih baik dan memastikan aplikasi web kita tetap responsif dan menyenangkan untuk digunakan.
9.11 Contoh Penerapan Animasi dan Transisi
Berikut adalah contoh lengkap penerapan animasi dan transisi menggunakan HTMX:
<!doctype html>
<html>
<head>
<title>Contoh Animasi dan Transisi dengan HTMX</title>
<script src="https://unpkg.com/[email protected]"></script>
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide-up-enter {
transform: translateY(100%);
}
.slide-up-enter-active {
transform: translateY(0);
transition: transform 0.5s ease-in-out;
}
.slide-up-leave {
transform: translateY(0);
}
.slide-up-leave-active {
transform: translateY(-100%);
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<h1>Contoh Animasi dan Transisi dengan HTMX</h1>
<div id="content">
<p>Ini adalah konten awal.</p>
</div>
<button hx-get="/load-content" hx-target="#content" hx-swap="outerHTML">
Muat Konten Baru
</button>
<button
hx-get="/load-content-slide"
hx-target="#content"
hx-swap="outerHTML"
>
Muat Konten dengan Slide Up
</button>
<script>
// Contoh penggunaan transisi sisi server
document.body.addEventListener("htmx:beforeSwap", function (event) {
if (
event.detail.xhr.getResponseHeader("HX-Transition") === "slide-up"
) {
event.detail.target.classList.add("slide-up-enter");
event.detail.target.classList.add("slide-up-enter-active");
}
});
document.body.addEventListener("htmx:afterSwap", function (event) {
if (
event.detail.xhr.getResponseHeader("HX-Transition") === "slide-up"
) {
setTimeout(function () {
event.detail.target.classList.remove("slide-up-enter");
event.detail.target.classList.remove("slide-up-enter-active");
}, 500);
}
});
</script>
</body>
</html>
Dalam contoh di atas, kita memiliki dua tombol yang memuat konten baru menggunakan HTMX. Tombol pertama menggunakan transisi fade, sementara tombol kedua menggunakan transisi slide-up.
Kita mendefinisikan gaya CSS untuk transisi fade dan slide-up menggunakan kelas-kelas seperti fade-enter, fade-enter-active, slide-up-enter, dan slide-up-enter-active. Kelas-kelas ini mengontrol tampilan elemen selama transisi berlangsung.
Untuk transisi slide-up, kita menggunakan event listener htmx:beforeSwap dan htmx:afterSwap untuk menambahkan dan menghapus kelas-kelas transisi pada elemen target sesuai dengan header respons HX-Transition yang diterima dari server.
Dengan menggabungkan kelas CSS khusus HTMX, animasi dan transisi pada pemuatan konten, serta transisi sisi server, kita dapat menciptakan pengalaman pengguna yang lebih menarik dan interaktif dalam aplikasi web kita.
9.12 Kesimpulan
Animasi dan transisi adalah alat yang kuat dalam pengembangan aplikasi web modern. Dengan menggunakan HTMX, kita dapat dengan mudah menerapkan animasi dan transisi pada pemuatan konten, memberikan pengalaman pengguna yang lebih halus dan menyenangkan.
Dalam bab ini, kita telah mempelajari berbagai teknik animasi dan transisi yang dapat diterapkan menggunakan HTMX. Kita telah melihat bagaimana menggunakan animasi CSS dasar, seperti animasi perubahan warna dan progress bar yang halus. Kita juga telah mempelajari cara menerapkan transisi pertukaran, seperti fade out saat pertukaran konten, serta transisi penyelesaian, seperti fade in saat penambahan konten baru.
Selain itu, kita telah menjelajahi penggunaan kelas CSS khusus HTMX untuk menerapkan animasi dan transisi pada elemen yang diperbarui oleh HTMX. Kita juga telah melihat contoh penerapan animasi fade-in pada pemuatan konten dan penggunaan transisi sisi server dengan header respons HX-Transition.
Kita juga telah membahas tips untuk mengoptimalkan kinerja animasi, seperti menggunakan properti CSS yang dapat diakselerasi perangkat keras, membatasi jumlah elemen yang dianimasi secara bersamaan, dan memilih durasi animasi yang sesuai.
Dengan menggabungkan animasi dan transisi yang halus dengan kemampuan HTMX untuk memuat konten secara dinamis, kita dapat menciptakan aplikasi web yang responsif, interaktif, dan menyenangkan bagi pengguna.
Jangan ragu untuk bereksperimen dengan berbagai teknik animasi dan transisi yang telah kita pelajari dalam bab ini. Cobalah menerapkannya dalam proyek Anda sendiri dan lihat bagaimana animasi dan transisi dapat meningkatkan pengalaman pengguna dalam aplikasi web yang Anda bangun.
Ingatlah untuk selalu mempertimbangkan kinerja dan aksesibilitas saat menerapkan animasi dan transisi. Pastikan animasi berjalan dengan mulus dan tidak mengganggu pengalaman pengguna, terutama pada perangkat dengan kemampuan yang lebih rendah.
Dengan pengetahuan yang telah kita dapatkan tentang animasi dan transisi dalam HTMX, kita siap untuk menciptakan aplikasi web yang lebih menarik, interaktif, dan memberikan pengalaman pengguna yang luar biasa. Selamat berkreasi dan semoga sukses dalam pengembangan aplikasi web Anda dengan HTMX!