2017-02-02 14 views
4

Мне нужно анимировать всплывающую подсказку, привязанную постоянно к маркеру (с использованием перехода CSS3), маркер анимирован, но всплывающая подсказка анимируется в первый раз с карты верхнего левого края на маркер. Как избежать такого поведения?Листовка подсказки не будет анимировать правильно

Demo of the issue

+1

Если вы хотите анимировать только использование непрозрачности 'переход: непрозрачность 4.0s linear'. Если вы действительно хотите анимировать позиционирование, поместите всплывающую подсказку в исходное положение перед ее анимацией. –

+0

подсказка привязана к маркеру, она перемещается вместе с ней, я не хочу ее перемещать. Я просто добавляю класс, поэтому у меня будет переходная анимация. Мне нужна анимация перемещения, а не непрозрачность. Попробуйте нажать кнопку «Тест» на моей демонстрационной ссылке –

ответ

1

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>

+0

Если я удалю ее, значит, у меня нет анимации. Моя цель - анимировать маркер и всплывающую подсказку об изменении позиции. Но без первой анимации всплывающей подсказки от верхней левой карты к маркеру. –

+0

@ swahi-ems, а затем заменить 'all' на' opacity', это поможет отобразить с эффектом. –

+0

попробуйте нажать кнопку TEST на демо-ссылке, и вы поймете, какая анимация мне нужна, если я перейду на непрозрачность, подсказка изменит ее положение без анимации. –