單張工具提示將無法正確動畫

我需要將永久綁定到工具提示的動畫提示（使用過渡CSS3）動起來，標記的動畫效果很好，但工具提示首次從左上角的地圖動畫到標記。如何避免這種行爲？單張工具提示將無法正確動畫

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然後用'opacity'替換'all'，這將有助於顯示效果。 –

嘗試點擊演示鏈接上的TEST按鈕，並且您將瞭解我需要的動畫，如果我更改爲不透明度，則工具提示將更改其位置而不顯示動畫 –

單張工具提示將無法正確動畫

回答

相關問題