ReactJS - Animasi: Menyusunkan Komponen Anda kehidupan

Hai teman-teman, para ahli animasi React masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia animasi ReactJS. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya bisa katakan bahwa animasi adalah seperti saus rahasia yang membuat aplikasi Anda tidak hanya berfungsi, tapi bahkan menyenangkan. Jadi, mari kita masuk dan membuat komponen Anda menari!

Magic React Transition Group

Sebelum kita mulai bermain dengan animasi, mari kita pahami apa itu React Transition Group. Pahami ini seperti kotak peralatan yang penuh dengan gadget yang handal untuk membantu kita membuat transisi yang mulus dan menarik di aplikasi React kami.

Menginstal React Transition Group

Pertama-tama, kita perlu mengundang React Transition Group ke pesta proyek kita. Buka terminal Anda dan ketik:

npm install react-transition-group

atau jika Anda penggemar yarn:

yarn add react-transition-group

Bagus! Sekarang kita memiliki kekuatan animasi super di ujung jari kita.

Transition: Dasar Animasi

Komponen Transition adalah seperti dasar rumah. Ini memberikan kita dasar yang kokoh untuk membangun animasi kita. Mari kita lihatnya dalam tindakan dengan contoh sederhana:

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

const FadeInOut = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
Saya adalah teks yang memudar!
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
Klik untuk Memudar
</button>
</div>
);
};

mariuraikan ini:

1. Kita mengimpor Transition dari 'react-transition-group'.
2. Kita menyiapkan beberapa gaya: defaultStyle untuk keadaan awal kita, dan transitionStyles untuk fase-fase berbeda transisi.
3. Komponen FadeInOut menggunakan state inProp untuk mengendalikan visibilitas.
4. Komponen Transition menerima dua prop utama: in (state visibilitas kita) dan timeout (durasi animasi).
5. Dalam Transition, kita gunakan fungsi yang menerima state transisi saat ini dan menerapkan gaya yang sesuai.

Ketika Anda mengklik tombol, Anda akan melihat teks beransur muncul dan menghilang secara mulus. Magic, kan?

CSSTransition: Ketika CSS Bertemu React

Sekarang, mari kita naikkan tingkat permainan kita dengan CSSTransition. Ini seperti saudara yang lebih keren dari Transition yang bekerja secara harmonis dengan kelas-kelas CSS. Mari kita lihat contoh yang menarik:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // Kita akan membuat ini dalam sekeliling

const Superhero = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
Saya adalah Superhero!
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
Transform!
</button>
</div>
);
};

Dan ini adalah CSS kita (di styles.css):

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

Ini apa yang terjadi:

1. Kita menggunakan CSSTransition sebagai ganti Transition.
2. Kita menentukan classNames="super", yang memberitahu React untuk menggunakan kelas-kelas seperti super-enter, super-enter-active, dll.
3. CSS kita menentukan bagaimana komponen harus terlihat dalam setiap fase transisi.

Ketika Anda mengklik "Transform!", superhero Anda akan muncul dan menghilang secara dramatis dengan efek skala. Seperti menonton film superhero, tapi di browser Anda!

TransitionGroup: Mengelola Transisi Banyak

Terakhir tapi bukan terkecil, mari kita bicara tentang TransitionGroup. Ini seperti konduktor di orkestra, mengelola banyak transisi sekaligus. Ini adalah contoh praktis:

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Masukkan tugas"
/>
<button onClick={addItem}>Tambah</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

Dan CSS yang sesuai (list-styles.css):

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

Contoh ini membuat daftar todo sederhana di mana item beransur muncul saat ditambahkan dan beransur menghilang saat dihapus. mariuraikan ini:

1. Kita menggunakan TransitionGroup untuk membungkus list item kita.
2. Setiap item dibungkus dalam CSSTransition.
3. Saat item ditambahkan atau dihapus, TransitionGroup mengelola transisi secara otomatis.

Hasilnya? Daftar todo yang mulus dan profesional yang akan membuat setiap manajer proyek bangga!

Penutup

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui negeri animasi React, dari Transition dasar ke TransitionGroup yang kuat. Ingat, animasi tidak hanya tentang membuat hal-hal terlihat cantik (meskipun itu adalah bonus bagus). Ini tentang menciptakan antarmuka intuitif dan responsif yang memandu pengguna Anda melalui aplikasi Anda.

Berikut adalah tabel referensi cepat dari metode yang kita diskusikan:

Komponen	Use Case	Key Props
Transition	Transisi dasar	in, timeout
CSSTransition	Transisi berdasarkan CSS	in, timeout, classNames
TransitionGroup	Mengelola banyak transisi	component (opsional)

Sekarang, maju dan animasikan! Dan ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan animasi bijak, dan pengguna Anda akan berterima kasih. Selamat coding!

Credits: Image by storyset