CSS关键帧动画缓慢/波动

Question

I have a problem with my animations. I am writing a chat which consists of a header, a body (where the dialog is) and an input field. It is positioned as so:

.chatWindowContainer {
    display: flex;
    flex-flow: column;
    position: absolute;
    bottom: 0px;
    right: 15%;
    margin-left: 10px;
    background-color: white;
    width: 350px;
    box-shadow: 0 20px 20px 5px rgba(0, 0, 0, 0.2),
    0 0px 10px 0 rgba(0, 0, 0, 0.19);
}

When clicking on the header I want to minimize the body and inputfield such that the header is the only thing that is visible (pretty much exactly like the facebook chat).

It is working ok but my problem is that the animation is not smooth at all. I have tried the translateZ(0) trick but that only seems to work for transitions and not animations.

Does anyone have a solution for this?

My animations are very simple and looks like this:

@keyframes minimize {
0% {
    max-height: 400px;
}
100% {
    max-height: 0px;
    padding: 0;
    margin: 0;
    }
}

@keyframes minimizeInputBox {
    0% {
        max-height: 40px;
    }
    100% {
        max-height: 0px;
        padding: 0;
        margin: 0;
    }
}
@keyframes minimizeChildren {
    0% {
        max-height: 400px;
        opacity: 0;
    }
    100% {
        opacity: 0;
        max-height: 0px;
        padding: 0;
        margin: 0;
        font-size: 0px;
    }
}

I also have maximize functions and those are exactly the same but vice versa.

Any help would be appreciated!

Answer 1

You are animating max-height which causes a reflow in layout which is quire GPU intensive. See https://csstriggers.com/ for CSS properties which cause layout, paint or composite calculations. The most performant way would be to do this in JavaScript to calculate the boundaries upfront and use transform along with requestAnimationFrame to manipulate the dimensions. But I have to admit it is a little tricky. Paul Lewis has a lot of good material about the FLIP technique: https://aerotwist.com/blog/flip-your-animations/