Мне нужно анимировать всплывающую подсказку, привязанную постоянно к маркеру (с использованием перехода CSS3), маркер анимирован, но всплывающая подсказка анимируется в первый раз с карты верхнего левого края на маркер. Как избежать такого поведения?Листовка подсказки не будет анимировать правильно
ответ
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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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>
Если я удалю ее, значит, у меня нет анимации. Моя цель - анимировать маркер и всплывающую подсказку об изменении позиции. Но без первой анимации всплывающей подсказки от верхней левой карты к маркеру. –
@ swahi-ems, а затем заменить 'all' на' opacity', это поможет отобразить с эффектом. –
попробуйте нажать кнопку TEST на демо-ссылке, и вы поймете, какая анимация мне нужна, если я перейду на непрозрачность, подсказка изменит ее положение без анимации. –
Если вы хотите анимировать только использование непрозрачности 'переход: непрозрачность 4.0s linear'. Если вы действительно хотите анимировать позиционирование, поместите всплывающую подсказку в исходное положение перед ее анимацией. –
подсказка привязана к маркеру, она перемещается вместе с ней, я не хочу ее перемещать. Я просто добавляю класс, поэтому у меня будет переходная анимация. Мне нужна анимация перемещения, а не непрозрачность. Попробуйте нажать кнопку «Тест» на моей демонстрационной ссылке –