调整地图大小的 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/

调整地图大小的 MapBox 平滑过渡

MapBox Smooth Transition of Resizing Map

javascript

transition

mapbox

mapbox-gl-js