MapBox平滑过渡调整地图大小

Question

我有一个CVOID-19的网站，在MapBox地图上显示案件。网站上的一个按钮可以隐藏案件信息，这样你就可以看到完整的地图。案例信息框的宽度转换很好用，但它使地图无法调整大小。幸运的是，有一个方便的方法叫做 map.resize() 在案例信息框的宽度降为零后，使用一个名为 "M "的函数将地图调整到合适的大小。transitionend 事件。然而，调整大小的过程完全没有过渡，最后地图突然不知道从哪里开始调整大小，看起来非常怪异。

Answer 1

这是我想出的解决方案，在过渡开始时，你每隔10毫秒调用map.resize()函数，然后在过渡结束后停止间隔，最后看起来更平滑。

let mapResizer;

countryPanel.addEventListener("transitionstart", (e) => {
    if (e.target == countryPanel) {
        mapResizer = setInterval(map.resize, 10);
    }
})

countryPanel.addEventListener("transitionend", (e) => {
    if (e.target == countryPanel) {
        if (e.target.classList.contains("hide")) {
            showBtn.hidden = false;
        }
        clearInterval(mapResizer);
    }
})

下面是点击隐藏UI按钮（指向左边的小箭头）时显示效果的网站。https:/people.rit.eduajr6974330Project%203。