javascript - CSS 关键帧动画滞后/断断续续

Question

我的动画有问题。我正在写一个由标题、正文(对话框所在的位置)和输入字段组成的聊天。它的位置是这样的:

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

单击标题时，我想最小化正文和输入字段，以便标题是唯一可见的内容(与 facebook 聊天非常相似)。

它工作正常，但我的问题是动画一点也不流畅。我已经尝试过 translateZ(0) 技巧，但它似乎只适用于过渡而不适用于动画。

有人对此有解决方案吗？

我的动画很简单，看起来像这样:

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

我也有最大化函数，它们完全相同，反之亦然。

如有任何帮助，我们将不胜感激!

Answer 1

您正在为 max-height 设置动画，这会导致布局重排，这需要 GPU 密集型。参见 https://csstriggers.com/对于导致布局、绘制或复合计算的 CSS 属性。最有效的方法是在 JavaScript 中执行此操作以预先计算边界并使用 transform 和 requestAnimationFrame 来操纵尺寸。但我不得不承认这有点棘手。Paul Lewis 有很多关于 FLIP 技术的好 Material :https://aerotwist.com/blog/flip-your-animations/