'Smooth parent transition on child "translateX"

On GIF below, there's parent div, which contain "left-menu" and "app-content". Left menu is animating, using keyframes and translate property

#LeftMenuContainer {
    &.menu_hidden {
        animation: slide-out 0.6s forwards;
    }

    &.menu_shown {
        animation: slide-in 0.6s forwards;
    }
}

@keyframes slide-in {
    0% { transform: translateX(-100%); width: 0; }
    100% { transform: translateX(0); width: auto; }
}

@keyframes slide-out {
    0% { transform: translateX(0); width: auto; }
    100% { transform: translateX(-100%); width: 0; }
}

DOM tree looks like this

<div id="contentContainer" class="flex">
      <app-left-menu></app-left-menu>
      <div>Be smooth!</div>
</div>

Is there any way, to "smooth" transition parent width, when "left-menu" is hiding? I try to add styles for parent, with

transition-property: width;
transition-duration: 0.6s;

but it doesn't work.

https://im2.ezgif.com/tmp/ezgif-2-a1f74da85c.gif

htmlcss


Solution 1:[1]

Assume It only flickers when comes to animate, so you can try to use will-change, css-will-change-property

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed

If you are using framework like React can try to use framer-motion

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nos nart

Related Questions