In this tutorial, we’ll learn how to animate child components dynamically using ReactCSSTransitionGroup, manage transitions effectively, and enhance styles with Sass.

---

1. Animation Types in React Transition Group

ReactCSSTransitionGroup supports three types of animations:

• Appear: Used when the component is mounted.
• Enter: Triggered when new items are added dynamically.
• Leave: Triggered when items are removed.

---

2. Setting Up "Enter" and "Leave" Transitions

Add "enter" and "leave" timeout properties in your component:

<ReactCSSTransitionGroup
    transitionName="example"
    transitionAppear={true}
    transitionAppearTimeout={500}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}>
    {this.state.items.map(item => (
        <div key={item.id}>{item.text}</div>
    ))}
</ReactCSSTransitionGroup>

---

3. Dynamic Child Components with State

Create a dynamic list of child components that respond to state changes:

handleAdd = () => {
    const newItem = { id: Date.now(), text: `Item ${this.state.items.length + 1}` };
    this.setState(prevState => ({ items: [...prevState.items, newItem] }));
};

handleRemove = id => {
    this.setState(prevState => ({
        items: prevState.items.filter(item => item.id !== id)
    }));
};

---

4. Adding CSS for Animations

Define CSS rules for "enter," "leave," and "appear" transitions:

.example-enter {
    opacity: 0;
    transform: scale(0.9);
}
.example-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 500ms, transform 500ms;
}
.example-leave {
    opacity: 1;
    transform: scale(1);
}
.example-leave-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 500ms, transform 500ms;
}

---

5. Sass Nesting for Cleaner Code

Leverage Sass nesting to structure your styles:

.example {
    &-enter {
        opacity: 0;
        transform: scale(0.9);
    }
    &-enter-active {
        opacity: 1;
        transform: scale(1);
        transition: opacity 500ms, transform 500ms;
    }
    &-leave {
        opacity: 1;
        transform: scale(1);
    }
    &-leave-active {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 500ms, transform 500ms;
    }
}

---

Key Takeaways

1. Animation Types: Understand "appear," "enter," and "leave" transitions.
2. Dynamic Rendering: Use state and array manipulation to manage child components dynamically.
3. CSS Best Practices: Utilize Sass nesting to maintain clean, organized styles.

---

In the next tutorial, we’ll continue exploring animations by learning how to manage leaving components and delve deeper into Sass features like nesting.