Javascript Jquery slideToggle会在flex对齐完成之前弄乱它

我创建了一个容器，用于在未保存某些内容时从站点底部滑出（以启用批量保存）。我以内容为中心，使用flex模式，使用以下css：

.save-footer {
    z-index: 9998; position: fixed; bottom:0; height:3em;
    background: rgb(255, 247, 125);
    color: black;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.5em;
}

。问题是，当我使用jQuery.slideDown（）时，它不考虑flex模式的居中，结果是向左移动（请参见jFiddle）。当它完成时，它会回到中心，因为我从另一个SO答案中得到了一个回调函数

有没有一种方法可以在不丢失对齐的情况下为幻灯片设置动画？有没有更好的方法完全实现这一目标？（我主要不是前端开发人员…）

---

注意：如果使用slideToggle而不是slideDown，后续幻灯片将正确对齐。

jQuery通过更改

显示来显示和隐藏项目，通常在
块
和
无
之间。这会干扰用于居中的
显示：flex
。一个简单的“低技术”解决方案是用另一个
div
（保存页脚容器）包装flexbox容器，并显示/隐藏所述容器：


。保存页脚容器{
显示：无；
z指数：9998；
位置：固定；
底部：0；
宽度：100%；
}
.保存页脚{
显示器：flex；
高度：3em；
背景：rgb（255247125）；
颜色：黑色；
对齐项目：居中；
证明内容：中心；
填充：0.5em；
}

弹出窗口
您的更改尚未保存
拯救
重新编写，使其上下平滑切换。通过
toggleClass（）
jQuery方法和CSS
transitions
可以进行切换。通过切换
.off
类，可以实现两种状态（例如打开和关闭）。通过在每个状态上设置
转换
（即打开=
。保存页脚
和关闭=
。关闭
），可以实现上下动画


一小条

。保存页脚{
z指数：9998；
位置：固定；
底部：0em；
高度：3em；
背景：rgb（255247125）；
颜色：黑色；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：0.5em；
过渡期：所有.7秒放松；
}
.关{
身高：0；
可见性：隐藏；
过渡：高度。5s放松，能见度。3s线性0s；
}

弹出窗口
您的更改尚未保存
拯救