我需要为永久绑定(bind)到标记的工具提示设置动画(使用过渡 CSS3)，标记的动画效果很好，但工具提示是第一次从左上角的 map 到标记的动画。如何避免这种行为？
最佳答案
更新:尝试更新的代码(切换类以获得所需的结果)
.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: '© <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/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/