MapBox 调整地图的平滑过渡

Question

我有一个 CVOID-19 网站，在 MapBox 地图上显示案例。网站上的一个按钮隐藏了案例信息，因此您可以获得完整的地图。案例信息框的宽度过渡效果很好，但它使地图未调整大小。值得庆幸的是，有一个方便地命名为map.resize() 的方法，它可以在案例信息框的宽度使用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.edu/ajr6974/330/Project%203/