在容器大小调整时调整传单地图的大小

我有一个<div>包含传单地图。在某些事件发生时，高度<div>将会被改变。我希望地图能够调整到其周围的新尺寸<div>以便旧中心位于调整大小的较小或较大地图的中心。我尝试使用invalidateSize()功能，但似乎根本不起作用。之后如何调整地图大小并居中map-container-resize event?

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

编辑以提供更多上下文：

地图容器最初的样式为

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

用户单击某个按钮后，页面底部会显示另一个面板，并且地图容器的高度将减小到小于 100%（例如 80%）。

单击此按钮后，将触发地图容器调整大小事件，以便我可以调整地图大小并以其旧（即调整大小发生之前）中心为中心。然后，地图本身的大小也应调整为其初始高度的 80%。

APi 文档用于invalidateSize似乎是我想要的：

“检查地图容器大小是否更改并更新地图（如果更改） [...]”

但看看输出getSize在调用 invalidateSize 之前和之后，函数没有任何不同，地图仍保持其旧大小。

问题是调整大小#map-container div是通过 CSS 转换完成的。当调用 invalidateSize 时，转换尚未开始，更不用说结束了，因此传单地图无法识别其周围尺寸的任何变化div.

触发map-container-resize延迟事件解决了问题。这边走 ：

setTimeout(function(){ map.invalidateSize()}, 400);