リーフレットのツールヒントが正しくアニメーション化されない

マーカーに永続的にバインドされたツールチップをマーカーにアニメーション化する必要があります（トランジションCSS3を使用）。マーカーはアニメーションはうまくいきますが、ツールチップは最初の左上のマップからマーカーまでアニメーション化されます。この動作を回避する方法は？リーフレットのツールヒントが正しくアニメーション化されない

Demo of the issue

出典

2017-02-02 swahi-ems

を試してみてください。不透明度4.0s線形である。ポジショニングを実際にアニメーション化する場合は、アニメーション化する前に開始位置にツールチップを配置します。 –

ツールチップがマーカーにバインドされている場合は、マーカーとともに移動しますが、移動することは選択しません。クラスを追加するだけで、トランジションアニメーションが作成されます。私は不透明アニメーションではなくムーブアニメーションが必要です。私のデモリンクのテストボタンをクリックしてください –

UPDATE：あなたが唯一の不透明度使用 `トランジションをアニメーション化する場合は、更新されたコード（望ましい結果を得るために、クラスの切り替え）

.anim-tooltip{ 
 
    transition: opacity 4.0s linear; 
 
} 
 
.anim-tooltip-custom{ 
 
    transition: all 4.0s linear; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Leaflet JS Bin</title> 
 
    <style> 
 
    #map { 
 
     width:600px; 
 
     height:400px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <button onclick="test()">TEST</button> 
 
    <div id='map'></div> 
 

 

 
    <script> 
 
    // Remember to include either the Leaflet 0.7.3 or the Leaflet 1.0.0-beta1 library 
 

 
    var myCenter = new L.LatLng(50.5, 30.51); 
 
    var map = new L.Map('map', {center: myCenter, zoom: 15}); 
 

 
    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
 
    }).addTo(map); 
 

 
    var marker = new L.Marker(myCenter); 
 
    map.addLayer(marker); 
 
    marker.setIcon(L.icon({ 
 
     iconUrl:"https://unpkg.com/[email protected]/dist/images/marker-icon.png", 
 
      className: 'anim-custom' 
 
     })); 
 
    
 
    
 
    marker.bindTooltip("Lorem ipsum dolor sit amescing elit",{ 
 
       permanent: true, 
 
       offset : [10,-20], 
 
       direction : "right", 
 
       className: 'anim-tooltip' 
 
     }).openTooltip(); 
 

 
    var test = function(){ 
 
    marker.bindTooltip().closeTooltip(); 
 
     marker._icon.className="anim-tooltip-custom"; 
 
     marker._tooltip._contentNode.className=marker._tooltip._contentNode.className.replace("anim-tooltip","anim-tooltip-custom");// update the class name with animate-custom 
 
    marker.bindTooltip().openTooltip(); 
 
     marker.setLatLng(new L.LatLng(50.502,30.512)); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

出典

2017-02-02 11:32:59

私はそれを削除する場合、私はアニメーションがないことを意味します。私の目標は、マーカとツールチップの位置を変更してアニメートすることです。しかし、左上からのツールチップの最初のアニメーションがマーカーにマップされていません。 –

@ swahi-ems次に、 'all'を' opacity'に置き換えて、効果を表示するのに役立ちます。 –

デモリンクのTESTボタンをクリックしようとすると、必要なアニメーションがわかります。不透明度に変更すると、ツールチップがアニメーションなしでその位置を変更します。 –

リーフレットのツールヒントが正しくアニメーション化されない

答えて

関連する問題