Need Some Help Reversing the Direction of This CSS Mount Animation?

Exploring this fiddle, I encountered a small div showcasing an opacity animation. The animation smoothly executes when the state transitions to true upon mounting the component, causing the div to fade in beautifully. However, I faced a challenge as the animation fails to trigger when the component is unmounted and the state changes to false. Even after trying different approaches like setting the animation as both and attempting a reverse animation (from 1 to 0), it only ends up playing immediately following the initial one, resulting in the disappearance of the square.

Is there a way to ensure that this fade animation plays in reverse when the component disappears?

Edit: I omitted mentioning that this scenario is within React environment. Eventually, my workaround involved incorporating an animation library, simplifying the process significantly. Nonetheless, I am keeping this question posted in case others might have vanilla solutions to this issue.

htmlcssreactjs

Answer №1

I have come up with a clever workaround to resolve this issue. There may be a more elegant solution in the future, but for now, this will suffice.

To achieve this, I've defined a new class called .hide that adjusts the opacity to 0 and sets visibility to hidden. This class is then added to the box element. Initially, the insertion animation remains unchanged. However, for the exit animation, I've implemented a transition property on the box element. Upon a second click, I've encapsulated the setVisible() method within a setTimeout() function with a delay equal to the duration of the transition specified for .hide.

This approach ensures that the box fades out first before the setVisible() method is triggered afterwards.

If you prefer not to use setTimeout(), an alternative option is to attach an eventListener to the box for the transitionend event, and execute setVisible() once it has completed.

For demonstration purposes, I have provided a working demo on JSFiddle: https://jsfiddle.net/32y8vjus/1/

Note: In the JSFiddle example, I am altering the background color to illustrate the timing of the transition relative to the removal of the box. Feel free to modify this to work with opacity instead.

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

Tips on including starting information into an angularjs application from the displayed HTML

I'm currently working on a complex AngularJs application that requires User Login. Once the user is authenticated, a page will be displayed to them and additional data will be loaded later. There are two methods for achieving this: XHR Fetch af ...

javascripthtmljsonangularjs

What are some efficient ways to enhance a React component with minimal impact on performance?

Within our team, we rely heavily on the React MaterialUI library. To ensure consistency in UI patterns and facilitate customization of MaterialUI components, we have adopted a practice of wrapping each MaterialUI component within our own custom component. ...

reactjsperformancematerial-ui

Can you explain the distinction between <div /> and <div></div> or <Component /> and <Component> </Component>?

Can you explain the distinctions between <div />, <div></div>, <Component />, and <Component> </Component> for me? <Layout home> \<section\> \<h2\>Blog\</h2\> ...

reactjsnext.jscomponents

Dispatch keystrokes to a designated text field if they are not taken in by any other input

Is there a way to achieve the functionality seen in apps like Discord, where users can type into the message box even when it's not in focus? I am interested in implementing this feature only if no other input field on the page is currently focused. ...

javascripthtmlreactjs

Unable to apply color changes with jQuery

As I delve into learning jQuery, I encountered an issue while attempting to change the color of a tr element. Strangely, I was successful in updating other CSS attributes like font-style. According to my understanding so far, we use the following syntax to ...

jqueryhtmlcss

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

cssreactjsanimationslider

Display a pop-up autocomplete within the textfield input using Material-ui

I'm currently working with Material UI v4 and I'm trying to implement an autocomplete feature where a dropdown pops up within the textfield as shown in the image below when users start typing. After searching extensively, I haven't been abl ...

reactjsmaterial-ui

Choosing a hyperlink within a cell depending on the surrounding text in that cell

Attempting to pick out the hyperlink text from a table cell when the desired text is also present in the cell Following an answer in that discussion, I have reached this point with my query. This is my current progress: def click_me(myString): WebDr ...

pythonhtmlselenium

Redux Dilemma: Stagnant Data in Redux Repository

Struggling to pass data fetched through axios into the Redux store for use in another component. While other actions and reducers are functioning correctly, this one seems to be causing issues. Here is the flow of data: Begin in the Filter component comp ...

javascriptreactjsreduxreact-reduxreact-props

Whenever I attempt to execute my .html and .js files, I encounter the error message: "Uncaught SyntaxError: Unexpected token <"

Just starting out in react.js, I decided to include CDN links to compile some basic react.js code into my html. Unfortunately, I encountered this error: "Uncaught SyntaxError: Unexpected token <" I did some research and found a suggestion to add: t ...

htmlreactjsjsx

Best Practices for Handling an Abundance of Data in React or Java

I am facing a challenge with my project setup, where I have the front end in ReactJS and the backend API in Spring Boot. The task at hand is to display a drop down list filled with records retrieved from the API. Here's the scenario: I receive a list ...

javascriptjavareactjsspring-mvcspring-boot

Show a row of pictures with overflow capabilities

I am looking to develop my own image viewer that surpasses the capabilities of Windows. My goal is to design an HTML page featuring all my images laid out horizontally to maximize screen space. I also want the images to adjust in size and alignment as I z ...

javascripthtml

How can I create a hover effect animation in React?

I am looking to replicate the menu item underline animation demonstrated in this example. In jQuery, I would easily achieve this by obtaining the left position and width of a menu item, then using stop.animation on hover. Attempting this animation with R ...

javascriptreactjsanimationreact-motion

Tips for adjusting the width of a Facebook embedded video within its container using ReactPlayer

Has anyone encountered issues with adding an embedded video to a NextJS app using ReactPlayer and Facebook videos? It seems that Facebook does not support the width="100%" attribute, as it always snaps back to 500px. Interestingly, this works wel ...

javascriptreactjsfacebooknext.jsreact-player

Submitting a form through Ajax is resulting in multiple submissions

Whenever I use Ajax to submit this form, it ends up posting multiple times without any obvious reason. Sometimes, it posts the form up to 10 times even though the submit button is clicked only once. I'm puzzled as to why this behavior is happening. An ...

javascriptphphtmlajaxforms

Press the "Reveal More" button to expand the content to its full size

I am currently working on coding a "read more" section using a button. I have looked at some existing solutions, but none of them are to my liking. My plan is to create a div that includes all the relevant content. My goal is to have a div at the bottom w ...

javascriptjqueryhtmlcss

Steps for leveraging pdfMake with live data

Recently delving into Angular, I've been exploring the capabilities of pdfMake. While I successfully incorporated static data, I'm facing challenges when attempting to utilize dynamic data. Any guidance on how to achieve this would be greatly app ...

javascripthtmlangulartypescriptpdfmake

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

javascriptandroidioscsscordova

Activate event listener exclusively on the homepage

In the script below import { useEffect } from 'react'; import Link from 'next/link' import { useRouter } from 'next/router' import styles from './header.module.scss' export default function Header(): JSX.Element { ...

reactjsnext.js

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs