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技术的好材料：https://aerotwist.com/blog/flip-your-animations/

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

1 个答案: