1

I have a function that sets new content to the Popup and opens it whenever the function receives data from the socket.

layer[i].getPopup().setContent(content)
layer[i].getPopup().options.autoClose = false;
layer[i].getPopup().options.closeOnClick = false;
layer[i].getPopup().options.className = "custom-popup"
layer[i].getPopup().update()
layer[i].openPopup();

I have also set a style class to set the background color of the popup and fade away whenever it opens.

.custom-popup .leaflet-popup-content-wrapper,
    .custom-popup .leaflet-popup-tip{
  animation: fadebackground 5s;
}
@keyframes fadebackground {
  from {background-color: #f7f571;}
  to {background-color: #fff;}
}

Now the first time the popup opens, the animation plays and the color fades to white. But then it's set and does not change again when the content inside changes unless I manually close and open the popup again. So, How do I re-render the popup so I can get the animation continuously whenever the content changes?

0

Once popup is displayed, changing content does not restart animation, since popup HTML element is not recreated, just updated with the new content. One way to restart animation would be to close popup and then reopen it, but that would cause a blink.

Other way to restart animation is to deal directly with the animation style of the popup HTML elements. Function below restarts animation of a single HTML element:

function animate(element) {
  element.style.animation = 'none';
  element.offsetHeight;
  element.style.animationDuration = '5s';
  element.style.animationName = 'fadebackground';
}

Parent HTML element of the popup can be retrieved with the popup.getElement() method. Actual HTML elements with the content of the popup are then childNode[0] (popup content) and .childNodes[1].childNodes[0] (popup tip). Animation of the popup style can then achieved with the folowing function:

function animatePopup(popup) {
  var popupElement = popup.getElement();
  animate(popupElement.childNodes[0]);
  animate(popupElement.childNodes[1].childNodes[0]);
}

So your code could then look something like this:

var popup = layer[i].getPopup();
popup.setContent(content);
if (!popup.isOpen()) layer[i].openPopup();
animatePopup(popup);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.