传单标记图标的动画过渡

Question

我有一个带有蓝色图标的传单标记（来自 PNG 图像源）。在鼠标悬停时，我想将其设为红色图标。

这是这样做的代码：

            let placeMarker = L.marker(...);

            let cssSetter = function (imarker, iicon) {
                imarker.setIcon(iicon);
            };

            placeMarker.on('mouseover', 
                L.bind(cssSetter, null, placeMarker, markerIcon_red)
            );
            placeMarker.on('mouseout', 
                L.bind(cssSetter, null, placeMarker, markerIcon)
            );

现在我想通过动画逐步完成这个过渡。

我该怎么做？

Answer 1

编写自己的 CSS 过渡。

http://css3.bradshawenterprises.com/cfimg/

---

或者使用插件 Leaflet.TransitionedIcon

https://github.com/naturalatlas/leaflet-transitionedicon