When i click Card component in MoviesList component, Card component navigate me to SingleMoviePage component and as you can see genres,starring,release date,production and stars sections have animaton which has sliding left to right.In first time these animations in SinglePageComponent work properly but if i click similar movies under movies in SingleMoviePage component it navigate me to another SingleMoviePage component but this time animations doesnt work properly.Why is that happens ? I use scss btw.
Github repo : https://github.com/UmutPalabiyik/hope-movie-app Website Demo : https://hope-movie.web.app/page/1
Let me explain why first. When the app navigates to SingleMoviePage, every animated component inside, such as your "genre", "starring", etc, gets rendered for the first time. Hence the sliding effects are applied. Then when a "similar movie" card component is clicked, it may look like the app takes you to another page, but that's not the case. All of your sliding elements are based on a local state movieDetails. When a "similar movie" card is clicked, this state gets updated, which then triggers re-render. React simply compares the diff and re-render whats different. And since only the texts are different, the elements are never replaced (unmounted + mounted). Hence no more sliding effects.
Here's a simple solution. Add unique keys in these elements. React uses keys to determine change. Reference: https://reactjs.org/docs/lists-and-keys.html#keys . For example, I see your movieId is the unique identifier. Try adding key={movieId} to your stars div. When a "similar movie" is selected, this key will change which will signal React to replace the div. The new div will have the sliding effect applied.