react -传单缩放移动标记与地图不同步

Question

我在React js应用程序上使用传单(带有typescript)。

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

我所期望的是地图正确地跟随标记，即使他们正在移动或标记跟随地图动画。不知怎么的，我找不到任何选项来控制这个行为。

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

<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;
}

我在缩放和平移地图时引起了动画。

删除这段代码中,动画消失了。