Animasi dan Transisi Vue yang Tidak Berlebihan

Setiap kali saya membuka proyek Vue yang baru dipegang tim lain, salah satu hal pertama yang saya periksa adalah seberapa banyak transisi yang dipasang di komponennya. Bukan karena saya anti-animasi — justru sebaliknya, animasi yang tepat sangat membantu pengguna memahami apa yang terjadi di layar. Masalahnya, terlalu sering saya menemukan animasi dipasang karena "kelihatan keren", bukan karena ada kebutuhan komunikasi. Di aplikasi internal seperti sistem kerja fasilitas kesehatan, di mana penggunanya adalah staf yang harus input data cepat berkali-kali sehari, animasi yang berlebihan justru jadi gesekan: sebagai ilustrasi, transisi yang berdurasi setengah detik saja sudah bisa terasa lambat kalau pengguna melakukan aksi yang sama puluhan kali dalam sejam.

Prinsip yang saya pegang: animasi ada untuk menjawab pertanyaan pengguna "elemen ini datang dari mana?" atau "kenapa tampilan berubah?". Kalau sebuah transisi tidak menjawab pertanyaan itu, kemungkinan besar dia cuma dekorasi yang bisa dihapus.

Animasi sebagai penunjuk arah, bukan hiasan

Vue punya komponen bawaan <Transition> dan <TransitionGroup> yang sengaja dibuat ringan — cukup untuk toggle class CSS saat elemen masuk/keluar dari DOM. Saya biasa memakainya untuk tiga kasus yang benar-benar butuh penjelasan visual:

• Perubahan urutan atau posisi item di list (misalnya setelah sorting atau filter), supaya pengguna tidak kehilangan jejak item yang tadi dilihat.
• Elemen yang muncul sebagai respons langsung dari aksi pengguna, seperti modal konfirmasi atau dropdown, supaya jelas dari mana asalnya.
• Perubahan state yang penting untuk disadari, seperti status berubah dari "diproses" ke "selesai" pada sebuah kartu data.

Contoh sederhana untuk transisi masuk/keluar:

<Transition name="fade">
  <div v-if="showPanel">Konten panel</div>
</Transition>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Perhatikan durasinya: 150ms pada contoh di atas, bukan 400-500ms yang sering jadi nilai default di banyak contoh tutorial. Sebagai ilustrasi saja, untuk aksi yang dilakukan berulang-ulang oleh pengguna power user — seperti membuka/menutup baris tabel — durasi di bawah 200ms biasanya masih terasa halus tapi tidak menghambat kecepatan kerja.

Kapan sebaiknya tidak ada animasi sama sekali

Ada kelas interaksi yang menurut saya justru lebih baik tanpa transisi: perubahan data di tabel besar, update angka pada dashboard yang sering di-refresh, atau notifikasi error yang harus langsung terlihat. Di sini animasi malah menunda pengguna menyadari informasi yang penting. Saya juga menghindari animasi pada form validation — begitu pengguna submit dan ada error, pesan errornya harus langsung muncul, bukan fade-in pelan yang membuat pengguna ragu apakah aplikasinya lag atau memang begitu perilakunya.

Aturan praktis yang saya pakai: kalau sebuah elemen akan sering muncul-hilang dalam satu sesi kerja pengguna (list yang di-filter berkali-kali, panel yang dibuka-tutup terus), animasinya harus sangat singkat atau malah dihilangkan. Kalau elemen itu jarang muncul dan butuh perhatian penuh pengguna sekali saja (dialog konfirmasi penting, onboarding), animasi yang sedikit lebih terasa justru membantu.

Soal performa: jangan animasikan properti yang mahal

Ini prinsip lama yang masih relevan: batasi animasi pada opacity dan transform karena keduanya bisa dikerjakan browser di compositor layer tanpa memicu reflow. Menganimasikan width, height, atau top/left secara langsung cenderung memicu layout recalculation berulang kali per frame, yang terasa patah-patah terutama di perangkat dengan spesifikasi menengah ke bawah — kondisi yang cukup umum di lingkungan kerja non-startup seperti klinik atau kantor pemerintahan.

Takeaway

Sebelum menambahkan transisi ke komponen Vue, saya selalu bertanya dulu: apakah animasi ini membantu pengguna mengerti perubahan yang terjadi, atau cuma menambah delay? Kalau jawabannya yang kedua, lebih baik dihapus. Gunakan <Transition> secukupnya, jaga durasi tetap singkat, dan batasi properti yang dianimasikan pada opacity/transform agar tetap ringan di perangkat apa pun.