All geek questions in one place

Tooltip will not animate correctly

I need to update the tooltip that is permanently attached to the marker (using CSS3 transition), the marker is well animated, but the tooltip is animated for the first time from the map of the upper left edge to the marker. How to avoid this behavior?

Problem demonstration

+4
source share
1 answer

UPDATE: try the updated code (class switching to get the desired result)

.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>
Run code
+1
source

Source: https://habr.com/ru/post/1668612/

More articles:


All Articles