Mastering Animations with React Transition Group
Written on
Chapter 1: Introduction to React Transition Group
The React Transition Group library simplifies the process of incorporating animations within your React applications. This guide will explore how to begin utilizing the features offered by this library, specifically focusing on the SwitchTransition and TransitionGroup components.
Section 1.1: Understanding SwitchTransition
The SwitchTransition component enables control over rendering during state transitions. For instance, consider the following example:
import React, { useState } from "react";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import "./styles.css";
export default function App() {
const [state, setState] = useState(false);
return (
<div className="App">
<SwitchTransition>
<CSSTransition
key={state ? "Goodbye, world!" : "Hello, world!"}
addEndListener={(node, done) =>
node.addEventListener("transitionend", done, false)}
classNames="fade"
>
<button onClick={() => setState((prev) => !prev)}>
{state ? "Goodbye, world!" : "Hello, world!"}</button>
</CSSTransition>
</SwitchTransition>
</div>
);
}
.fade-enter {
opacity: 0;
}
.fade-exit {
opacity: 1;
}
.fade-enter-active {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
transition: opacity 500ms;
}
In this example, we implement the SwitchTransition and CSSTransition components to apply transitions styled with external CSS. The SwitchTransition controls the rendering of transitions as we toggle the state, while CSSTransition defines the styles applicable during each state transition. The addEndListener property invokes a function that triggers the completion of the transition.
Section 1.2: Exploring TransitionGroup
The TransitionGroup component allows for the management of multiple transition components. Here’s how it can be implemented:
import React, { useState } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { v4 as uuidv4 } from "uuid";
import "./styles.css";
export default function App() {
const [items, setItems] = useState([
{ id: uuidv4(), text: "eat" },
{ id: uuidv4(), text: "drink" },
{ id: uuidv4(), text: "sleep" },
{ id: uuidv4(), text: "walk" }
]);
return (
<div className="App">
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition key={id} timeout={500} classNames="item">
<div>
<button
className="remove-btn"
variant="danger"
size="sm"
onClick={() =>
setItems((prevItems) => prevItems.filter((item) => item.id !== id))}
>
×</button>
{text}
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
}
.remove-btn {
margin-right: 0.5rem;
}
.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;
}
In this snippet, we initialize the items state with a list of items. The TransitionGroup component is employed to showcase transitions for each rendered item. The CSSTransition component inside it applies transitions as defined by the CSS styles. Clicking the button removes the current item, allowing us to observe the transition effect as it fades away.
Chapter 2: Conclusion
Through the TransitionGroup component, we can seamlessly add transitions to groups of items. Meanwhile, the SwitchTransition component allows us to render transitions between different state changes effectively.
The first video demonstrates how to implement CSSTransition with React Transition Group, providing a visual guide to mastering animation in your applications.
The second video continues the exploration of React CSSTransition and TransitionGroup, offering further insights through practical examples.