React-Leaflet 捏缩放移动标记与地图不同步

Question

我在 React js 应用程序（带有打字稿）上使用传单。

该地图在桌面浏览器上运行良好，但在移动设备上我在缩放和平移屏幕时遇到了一些问题：在屏幕上捏合时，标记与我的手指一起移动，但地图不会立即跟随，它有一些一种动画，使其在动画期间与标记不同步。

我期望的是地图即使在标记移动时也能正确地跟随标记，或者标记跟随地图动画。 不知何故，我找不到任何控制这种行为的选项。

这是我对地图的反应代码：

<MapContainer id="map" center={[41.890196167312055, 12.492341923687258]} ref={mapRef} trackResize={true} zoomSnap={0} zoomDelta={0.3} zoomControl={false} zoom={zoom} maxZoom={18} minZoom={2} inertia={false} easeLinearity={0}>
                <TileLayer
                    attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
                />
                <ZoomControl position="bottomleft" />
                <ScaleControl position="bottomleft" metric imperial={false} />
      {
          Object.keys(places).map(place => <Marker key={place} position={[plantsPlaces[place][0].lat!, places[place][0].lng!]}>
            <Popup offset={L.point(0,-20)} zoomAnimation={false} >
            {(places[place]).map(p => 
                    <div key={p.id}>
                        <div className="mapTooltipHeader flex flex-row align-items-center justify-content-between">{p.plantName}</div></div>)}
               </Popup>
           </Marker>)
       }
</MapContainer>

效果可以看这里： https ://gifyu.com/image/SKXsL

是否可以禁用此行为并在捏合时让地图跟随标记？

Answer 1

终于找到了解决办法：

这不是传单或反应传单问题。

在网站的所有 css 文件中，有一个部分包含以下代码：

div {
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}

我在地图的缩放和平移过程中产生了动画。

删除此代码，动画消失了。