gpt4 book ai didi

javascript - 传单工具提示不会正确动画

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:26:31 27 4
gpt4 key购买 nike

我需要为永久绑定(bind)到标记的工具提示设置动画(使用过渡 CSS3),标记的动画效果很好,但工具提示是第一次从左上角的 map 到标记的动画。如何避免这种行为?

Demo of the issue

最佳答案

更新:尝试更新的代码(切换类以获得所需的结果)

.anim-tooltip{
transition: opacity 4.0s linear;
}
.anim-tooltip-custom{
transition: all 4.0s linear;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/leaflet@1.0.0/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/leaflet@1.0.0/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>

关于javascript - 传单工具提示不会正确动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42001003/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com