Desplazamiento dinámico del folleto emergente

Question

Cuando aparece una ventana emergente de folleto, me gustaría animar su valor de desplazamiento, de modo que la ventana emergente se desplace hacia la derecha cuando aparezca. Me imagino que los códigos va algo como esto, pero no he sido capaz de averiguarlo:

layer.bindPopup(content,
{
offset: [x, y]
});

layer.on('click', function () {
setInterval(functionThatAnimatesxandy, 1000);
}

Así que aparentemente no se puede animar el valor de desplazamiento. Cuál podría ser una solución con transiciones CSS?

Answer 1

offset es una opción de creación y no se puede cambiar después de la creación. La forma correcta de cambiar la posición de la ventana emergente es utilizar popup.setLatLng(...) . En el oyente de eventos debe pasar la ventana emergente como contexto del evento (según la directiva docs ). Entonces podrá modificarlo dentro de la función de escucha.

layer.bindPopup(content)

layer.on('click', function() {
  setInterval(functionThatAnimatesXAndY, 1000)
}, layer.getPopup()) // Pass the popup as the context

Y luego en tu función podrías hacer algo como esto:

functionThatAnimatesXAndY(popup) {
  ... // here you can use popup.getLatLng() and popup.setLatLng(...)
}

Answer 2

Desde popup div ya tiene varias clases CSS y el desplazamiento de la ventana emergente se realiza a través de HTML style atributo ( left y bottom propiedades), no veo una manera de animar popup con transiciones CSS.

Pero hay como una manera mediante el uso de popup className sólo para acceder al contenedor emergente y luego cambiar su style.left dinámicamente mediante setTimeout función. Ventana emergente className puede ser cualquier cosa que no entre en conflicto con otras clases y no es necesario que exista. Al final de la animación, el desplazamiento de la ventana emergente debe establecerse en el nuevo valor para que se tenga en cuenta cuando se redibuje la ventana emergente con el zoom del mapa.

A continuación se muestra un ejemplo de funcionamiento completo en el que la ventana emergente se desplaza a la derecha 20 píxeles después de mostrarse:

var map = L.map('map').setView([52.2858, 5.78682], 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
  maxZoom: 18
}).addTo(map);

var myPopup = L.popup({
  className: 'myPopup',
  offset: [0, 0]
});

myPopup.setContent(     
  '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat non elit at pretium.</p>'
  + '<p>Curabitur iaculis dolor interdum nulla dignissim, iaculis pretium nisl vulputate. Donec eget eros sapien.</p>'
);

function animatePopup(popup, offset, step, currentOffset) {
  var popupElement = document.getElementsByClassName(popup.options.className)[0];
  var left = parseInt(popupElement.style.left);
  if (typeof currentOffset == 'undefined') currentOffset = 0;
  popupElement.style.left = left + step + 'px';
  offset -= step;
  if (offset > 0) {
    currentOffset += step;
    setTimeout(animatePopup, 30, popup, offset, step, currentOffset);
    }
  else {
    var bottom = parseInt(popupElement.style.bottom);
    popup.options.offset = [currentOffset, -bottom];
  }
}

map.on('popupopen', function (evt) {
  animatePopup(evt.popup, 20, 1);
});

myPopup.setLatLng(map.getCenter()).openOn(map);