Smooth animation of changing Leaflet marker's position on setLatLng

gistfile1.txt

// just include d3js and add animaDur in ms to marker's option

L.SVG.prototype._setPath = function(layer,path){ 
	if(layer.options.animaDur)
		d3.select(layer._path).transition().duration(layer.options.animaDur).ease('linear').attr('d',path)
	else
		layer._path.setAttribute('d', path); 
}

You may also do that with simple CSS transitions.

.leaflet-marker-pane > * {
  -webkit-transition: transform .3s linear;
  -moz-transition: transform .3s linear;
  -o-transition: transform .3s linear;
  -ms-transition: transform .3s linear;
  transition: transform .3s linear;
}

@gwendall, this is really nice for updating the markers. However, if a popup is open on the marker, the popup does not move smoothly. Do you know how this can be extended so that the popup moves smoothly too?

I tried the following:

.leaflet-popup-pane > * {
    -webkit-transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -o-transition: transform .3s linear;
    -ms-transition: transform .3s linear;
    transition: transform .3s linear;
}

But this did not work as expected.

If I'm using it inside SvelteKit, adding CSS doesn't seem to work. I assume because .leaflet-marker-pane doesn't exist until Leaflet does it's magic. Svelte seems to recognize it as an unused CSS selector. Any thoughts?