MapBox Плавный переход изменения размера карты - PullRequest
Новая
       15

MapBox Плавный переход изменения размера карты

0 голосов
/ 29 апреля 2020

У меня есть веб-сайт для CVOID-19, который отображает случаи на карте MapBox. Одна из кнопок на веб-сайте скрывает информацию о деле, поэтому вы получаете полную карту. Изменение ширины окна информации о регистре работает хорошо, но оставляет карту неизменной. К счастью, есть метод с удобным названием map.resize(), который изменяет размеры карты до ее соответствующего размера после того, как ширина поля информации о деле уменьшается до нуля с помощью события transitionend. Однако изменение размера не изменяется вообще, и в итоге он выглядит невероятно дерганным с внезапным изменением размера карты из ниоткуда.

1 Ответ

1 голос
/ 29 апреля 2020

Это решение, которое я придумал, в начале перехода вы вызываете функцию map.resize () каждые 10 мс, а затем останавливаете интервал после завершения перехода, в итоге он выглядит совсем немного Smooth. 

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);
    }
})

Вот веб-сайт, показывающий эффект при нажатии кнопки скрытия пользовательского интерфейса (маленькая стрелка, указывающая влево): https://people.rit.edu/ajr6974/330/Project%203/

...