What are the steps to create a background animation?

I currently have a menu form that allows users to add and remove items using React Transition Group.

Incorporating ReactJS:

<TransitionGroup>
    {
        menu.map(meal =>
            <CSSTransition
                key={meal.id}
                timeout={500}
                classNames="meMeals"
            >
                <Meal meal={meal} deleteFromMenu={deleteMealFromMenu}/>
            </CSSTransition>
        )
    }
</TransitionGroup>

Here is the CSS used:

.meMeals-enter {
    opacity: 0;
    transform: translateY(-30px);
}
.meMeals-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 500ms ease-in;
}
.meMeals-exit {
    opacity: 1;
    transform: translateY(0);
}
.meMeals-exit-active {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 500ms ease-in;
}

https://i.sstatic.net/4xJYn.png

Although I am satisfied with how the menu items behave, I now wish to implement smooth movements for the background element (grey) and the add button as new menu items appear or disappear. How can this be achieved?

cssreactjsreact-transition-group

Answer №1

To tackle the issue, I devised a method that operates independently from the TransitionGroup but still manages to work seamlessly. Additionally, I adjusted my window settings:

transition: 0.7s;

regardless of the nature of the animation. Now, I invoke this method whenever there is a modification in the list....

   function adjustMenuHeight(value) {
        const menuHeight = menuEditorRef.current.getBoundingClientRect().height;    
    if (value > 0) {
        menuEditorRef.current.setAttribute("style", "height: " + (menuHeight + 52) + "px");
    } else {
        menuEditorRef.current.setAttribute("style", "height: " + (menuHeight - 52) + "px");
    }
}

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 align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

htmlcssreactjsresponsive-design

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

The state update is paused by one state

Feeling a bit lost here, could be a beginner's mistake. Attempting to replicate the game of chess. Encountering a delay issue in my code.. basically, when I click on a square to display the possible moves for a piece, they only show up correctly aft ...

reactjsreact-hooksnext.jssetstate

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

javascriptjqueryhtmlcss

The behavior of NextJS API not allowing requests to be sent to external domains

I have a basic NextJS application up and running on Vercel. I copied the NextJS template provided by Vercel and included only one file named jira.js My goal is to send random data to an external API whenever this jira endpoint is triggered. The content o ...

node.jsreactjsnext.jsvercel

What is the best way to store changing images in a Next.js application?

Is it possible to set the cache-control for images in a list of objects received from an API? Each object in the list contains a property called imageUrl, which is the link to the image. ...

javascriptreactjsimagecachingnext.js

Why does updating the state variable of a child component result in an infinite loop?

Check out my code here. I'm currently working on a header detail page where I need to display the first staff detail in a table. However, I've encountered a strange issue. To fetch data from the server, I'm using the useEffect hook and st ...

reactjsreact-state

Creating a table with multiple rows condensed into a single row (Using Material-UI/CSS)

Here is the array structure I am working with: const sample = [ { name: 'apple', detail: [{'a', 'b'}]}, { name: 'banana', detail: [{'a', 'b'}]}, ]; In order to create a table similar to the ...

cssreactjsuser-interfacehtml-tablematerial-ui

Prevent parent element from changing color when child element is clicked

Check out my HTML: .imageURL:active .image_submit_div { background-color: #ccc; } .image_submit_div:active { background-color: #e6e6e6; } <div class="image_div"> <label for="id_image" class="image_submit_div"> <h3>+ add ...

javascriptjquerycss

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

htmlcsstwitter-bootstrap

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?

Encountering an issue with a checkbox list snippet in Next-js and React after moving it to the sandbox. Each time I click on a checkbox, I receive the error message: TypeError: Cannot read properties of undefined (reading 'id') This error is co ...

javascriptreactjsreact-hooksnext.js

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

javascriptcssajaxhtmltwitter-bootstrap

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

javascriptjqueryhtmlcss

React's useContext and useEffect cause outdated data to be displayed

https://codesandbox.io/s/react-usecontextuseeffect-stale-data-bug-l81sn Within a component, I utilize the useEffect hook to trigger actions when a specific value changes. Currently, this value is just a basic counter, but in practical scenarios, it could ...

reactjs

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jqueryhtmlcsstwitter-bootstrap-3

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

javascriptjquerycsswordpressgif

I'm having trouble with create-react-app and it seems to be stalled indefinitely. Any advice on how to resolve this issue

After completing a React course, I wanted to start practicing by creating a project using create-react-app. However, I'm facing difficulties as the installation process gets stuck and displays error messages that are hard for me to understand. I&apos ...

node.jsreactjsnpmcreate-react-appnpx

Updating React component props

After updating the state in a component and passing the new props into the child, I noticed that the child is not updating correctly and the defaultValue of the input is not changing. My initial thought was that using this.props could be the issue, so I sw ...

javascriptreactjsreact-props

Filtering function that works without specific knowledge of keys

I'm working on a JavaScript method to filter a list dynamically without knowing the specific key (s). I've made some progress, but I'm stuck and not sure how to proceed. The foreach loop I have isn't correct, but I used it for clarity. ...

javascriptreactjstypescript