javascript – 宣传单工具提示无法正确制作动画

2023-01-31 14:11:15

我需要动画工具提示动画永久绑定到标记(使用转换CSS3),标记动画很好,但工具提示在第一次从左上角地图到标记动画.如何避免这种行为？

解决方法:

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

.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>

码农公寓

相关文章