cssreactjsreact-transition-group

How I can make animation for background?

I have a menu form. To add and remove items from this menu, I use React Transition Group

ReactJS:

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

CSS:

.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;
}

enter image description here

and I am completely satisfied with the behavior of the menu items. Now I want the background element (grey) as well as the add button to move smoothly as the menu item appears or disappears. How can i do this?

Solution

  • I solved the problem by writing a method that is not directly related to the TransitionGroup, but works in parallel. I also set my window:

    transition: 0.5s;

    whatever the animation Now I call this method every time the list changes....

       function replaceMenuSize(value) {
        const menuSize = menuEditorRef.current.getBoundingClientRect().height    
    if (value > 0) {
        menuEditorRef.current.setAttribute("style", "height: " + (menuSize + 41) + "px")
    } else {
        menuEditorRef.current.setAttribute("style", "height: " + (menuSize - 41) + "px")
    }
}