After the ReactJS onload event, CSS animations malfunction

When I click on a Card component within the MoviesList component, it redirects me to the SingleMoviePage component. The genres, starring, release date, production, and stars sections all have animations that slide from left to right. Initially, these animations work properly in the SingleMoviePageComponent. However, when I click on similar movies within the SingleMoviePage component, it redirects me to another SingleMoviePage component where the animations no longer function properly. Why does this happen? I am using SCSS by the way.

Check out the Github repo: https://github.com/UmutPalabiyik/hope-movie-app View the Website Demo here:

javascriptcssreactjsreduxsass

Answer №1

Allow me to elaborate on the reasoning behind this behavior. When transitioning to the SingleMoviePage in the app, all animated components within it - such as "genre", "starring", and so forth - are rendered for the first time. This is why the sliding effects are initially applied. However, when a user clicks on a component like a "similar movie" card, it may appear that a new page is loaded, but in reality, the existing elements are simply updated. The sliding animations are controlled by a local state variable called movieDetails. When a "similar movie" card is clicked, the state is modified, triggering a re-render. React optimizes this process by only updating the elements that have changed, which in this case are just the texts. As a result, there are no unmounting and mounting operations, leading to the absence of sliding effects.

A straightforward solution to address this issue is to assign unique keys to these elements. Keys serve as identifiers for React to determine changes in the components. By incorporating keys, such as utilizing the unique movieId as a key for the stars div, you can signal React to replace the div upon selecting a "similar movie". The updated div will then exhibit the desired sliding effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Aligning drop down menu links in a horizontal CSS menu with their respective parent elements

https://i.sstatic.net/JctLc.pngMy navigation bar has a full-width drop-down sub-menu (the "About" dropdown), but I am having difficulty aligning the links within the submenu directly under their parent. I also need this layout to be responsive, ensuring th ...

htmlcss

Changing p tags to br tags on tinyMCE

I need assistance with using tinyMCE as an inline editor. I want it so that when a user is in edit mode and presses enter, <br /> is inserted instead of <p>. I have gone through the manual and FAQ but have not been able to achieve this successf ...

javascripttinymceinline-editing

Angular backslash is encoded

Experiencing the same issue as this individual: angularjs-slash-after-hashbang-gets-encoded The URL is getting encoded and not routing correctly, causing it to fall to the otherwise in my route config. I have not been able to identify the root cause yet, ...

javascripthtmlangularjsurl-rewriting

Collapse the sidebar using React when clicked

Just beginning to learn about React and I'm trying to figure out how to toggle the open/closed state of a react-pro-sidebar component using a click event: export default function MaterialLayout(props) { const { children } = props; const classes = us ...

javascriptreactjs

Storing an Excel file with JavaScript: A comprehensive guide

I've been struggling to save an Excel file using Javascript, but I'm facing compatibility issues with different browsers. I initially tried using BASE64 along with data URL, which worked well in Chrome and Firefox but failed in IE and Safari. ne ...

javascriptangularjsexcelpdf

The basic CSS container fails to properly align its elements as intended

Recently, I created a CSS div using Bootstrap and added some custom styling. You can check out the fiddle for a live demo of the code: https://jsfiddle.net/w9gyc0t5/. Here's the actual code: <!-- Bootstrap docs: https://getbootstrap.com/docs -- ...

htmlcss

Does the inclusion of a d.ts file in a JavaScript npm package constitute a breaking change according to SemVer guidelines?

Is adding a d.ts type declaration file and a new "types" property in the package.json of a JavaScript npm package considered a breaking change? Would it require a major version bump according to SemVer? This situation could go either way. It doesn't ...

javascripttypescriptnpmsemantic-versioning.d.ts

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

I am looking to create a mono repository that includes the following elements: shared: a collection of TypeScript classes that are universally applicable WebClient: a react web application in JavaScript (which requires utilizing code from the shared folde ...

javascriptnode.jsreactjstypescriptwebpack

Rendering the Next.js Link tag on the page is displaying as [object Object]

Hey there! I'm currently working on creating breadcrumbs for a webpage and this is what the breadcrumb array looks like: const breadcrumbs = ['Home', "Men's Top", 'Winter Jacket'] Now, in JSX with Next.js, I am att ...

javascriptreactjsnext.js

My linter in VSCode is not picking up on the fact that TypeScript is being imported and utilized in my React code

As I develop my app using React Native and TypeScript, I employ React Navigation for navigation purposes. Within my navigator, I utilize Icons from React Native Elements for the tabs. However, despite importing React to use them, my linter does not acknow ...

reactjstypescriptreact-nativevisual-studio-codeeslint

Caution: React is unable to identify the `rowDirection` property on a HTML element, however, I have not come across any code containing `rowDirection`

During my demo in this link, an issue was reported with the following message: Warning: React does not recognize the `rowDirection` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `rowd ...

javascriptreactjs

Achieve the identical outcome of the code in jQuery using React.js

Hey there! I'm currently exploring how to achieve similar results using React JS. I realize my request might seem a bit trivial, but I'm in the process of understanding how JavaScript and React JS can be connected in practical projects. Feel fr ...

javascriptjqueryreactjs

What is the best way to access data from outside a forEach loop in JavaScript?

I am trying to access the value of my uid outside of the foreach loop in my code. Can anyone assist me with this? This is the code I am working with: var conf_url = "https://192.168.236.33/confbridge_participants/conference_participants.json?cid=009000 ...

javascriptarraysajaxjson

Is there a way to consistently substitute a specific path parameter with a different value within node.js?

Snippet of my coding: router.get('/name/:name/height', (req,res) => { ... } router.get('/name/:name/weight', (req,res) => { ... } router.get('/age/:age/height', (req,res) => { ... } router.get('/ag ...

javascriptnode.jsexpress

Tips for showing an image and text side by side on a mobile device using CSS

I am having trouble displaying the image and text side by side on mobile devices. It works fine on desktop, but on mobile, the image is appearing above the text. Can someone assist me in fixing this issue? Below is an example of how it looks on a mobile d ...

htmlcssmedia-queries

Hover over the image to trigger animation effects

Looking for a way to enhance my current jQuery script that creates an orange transparent hover effect over images. How can I add animations, specifically a fade in and out effect? $(document).ready(function() { $('#gallery a').bind('mo ...

jqueryhtmlcssjquery-uijquery-animate

Setting a relative path for a reverse proxy in a Next.js server: a step-by-step guide

I currently have two servers, A and B, both hosted on AWS. Server A has a rule in place that directs traffic with paths containing /v2/ to server B, which is functioning correctly. Server B runs a NextJs application using nginx and express. All routes on ...

reactjsnext.js

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

javascripthtmlcsstwitter-bootstrap

I prefer to have the links activate when the mouse hovers over them, rather than when hovering over empty

Is there a way to prevent the bottom links (music, contact, archive) from being highlighted when the mouse hovers over the empty space between them and not just on the actual links themselves? I want the mouse to only react to the links it hovers over and ...

csstumblr