Transisi Halus dengan React Transition Group - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenalan dengan React Transition Group

Buat yang suka tampilan mulus saat elemen muncul atau hilang, React Transition Group adalah solusinya! Ini adalah library animasi bawaan React yang ringan dan mudah digunakan untuk transisi elemen dalam aplikasi.

2. Kenapa Harus Pakai React Transition Group?

• Ringan & Efisien: Tidak menambah ukuran bundle terlalu besar.
• Integrasi Mudah: Bisa langsung dipakai dalam komponen React.
• Kontrol Penuh: Bisa atur efek masuk, keluar, dan perubahan antar status.
• Kompatibel dengan CSS & JavaScript: Bisa pakai animasi CSS atau dikombinasikan dengan JS.

3. Instalasi React Transition Group

Kalau belum terinstal, tambahkan dulu ke proyek React dengan perintah berikut:

npm install react-transition-group

4. Cara Menggunakan React Transition Group

Ada tiga komponen utama dalam library ini:

• CSSTransition: Untuk animasi berbasis CSS.
• Transition: Untuk animasi dengan JavaScript.
• TransitionGroup: Untuk mengelola banyak transisi sekaligus.

Contoh penggunaan CSSTransition:

import { useState } from "react";
import { CSSTransition } from "react-transition-group";
import "./styles.css";

const FadeInComponent = () => {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
        <div className="box">Halo, Aku Muncul!</div>
      </CSSTransition>
    </div>
  );
};

export default FadeInComponent;

CSS untuk Animasi:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

5. Penjelasan Kode

• in={show}: Menentukan apakah elemen muncul atau menghilang.
• timeout={300}: Durasi animasi dalam milidetik.
• classNames="fade": Prefiks untuk kelas CSS animasi.
• unmountOnExit: Menghapus elemen dari DOM saat tidak ditampilkan.

6. Kapan Harus Pakai React Transition Group?

• Saat butuh efek masuk/keluar yang halus di aplikasi.
• Ketika ingin mengelola banyak elemen dengan transisi berbeda.
• Jika ingin kombinasi fleksibel antara animasi CSS dan JavaScript.

Kesimpulan

React Transition Group adalah cara praktis untuk membuat transisi elemen jadi lebih halus dan profesional. Dengan pendekatan yang ringan dan fleksibel, kamu bisa bikin efek animasi keren tanpa mengorbankan performa aplikasi React-mu!