https://github.com/alexandershushunov/show-div-with-animation

https://github.com/alexandershushunov/show-div-with-animation

Last synced: 23 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alexandershushunov/show-div-with-animation
• Owner: AlexanderShushunov
• Created: 2024-04-05T15:53:57.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-05T16:19:33.000Z (9 months ago)
• Last Synced: 2024-04-23T20:26:34.310Z (8 months ago)
• Language: TypeScript
• Homepage:
• Size: 128 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React CSS Animation Trigger Example

This project demonstrates triggering CSS transition in React when adding elements. 

The main challenge is that adding an element and assigning it a "visible" class within the same frame 

prevents the animation from triggering.

## Problem

CSS transition don't start if the element's "visible" class is assigned immediately upon addition,

due to the need for a detectable state change.

## Solutions

### Method 1: render -> requestAnimationFrame -> class assignment

- **Add component via state change**: Change the state to initiate a component rendering.

- **After render schedule a class Assignment in Next Animation Frame:**: Use `useEffect` to add the "visible" class

in the next animation frame, allowing time for the DOM to update.

### Method 2: requestAnimationFrame -> requestAnimationFrame -> class assignment

- **Add Component via State Change**: Change the state to initiate a component rendering.

- **Delay Class Assignment**: Wait until after the next animation frame to assign the "visible" class, 

ensuring React has updated the DOM.

See commit history for the implementation of each method.

Run the development server:

```bash

npm install

npm run dev

```