CSS3 animasyonlarını kullanarak Pulsating Leaflet marker

Question

Bir Leaflet haritasında özel bir titreşimli harita işareti simgesi oluşturmak istiyorum. Öğrenme amaçlı üçüncü taraf eklentileri kullanmak istemiyorum. Ben Broşürü en DivIcon bir işaretleyici görselleştirme değiştirmek için (yukarıdaki CSS sınıfı başvuran) kullanıyorum

.gps_ring { 
    border: 3px solid #999; 
    -webkit-border-radius: 30px; 
    height: 18px; 
    width: 18px;  
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite;  
} 
@-webkit-keyframes pulsate { 
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
    50% {opacity: 1.0;} 
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 

:

Ben 'pulsating'-animasyon oluşturmak için aşağıdaki CSS kodunu kullanıyorum :

// Define an icon called cssIcon 
var cssIcon = L.divIcon({ 
    // Specify a class name we can refer to in CSS. 
    className: 'gps_ring' 
}); 

// Create markers and set their icons to cssIcon 
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map); 

Bu yaklaşım şu anda çalışmıyor. Animasyonlu işaretçi simgesi her zaman haritanın sol üst köşesinde görünür. Dönüşüm (ölçek) geçerli işaretçi konumunu kırar gibi görünüyor:

BTW Windows 7 ve Yosemite Chrome 44.x kullanıyorum. Ne yanlış gidiyor

http://jsfiddle.net/christianjunk/q69qx45c/1/

:

Burada minimal örneğini oluşturduk? Animasyon neden işaretleyicinin harita konumunu bozuyor? Ben CSS kodunu slighlty değişti

:

Answer 1

süre daha araştırdıktan sonra ben sorunu çözmek için bir yol buldu

.css-icon { 

} 

.gps_ring { 
    border: 3px solid #999; 
    -webkit-border-radius: 30px; 
    height: 18px; 
    width: 18px;  
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/ 
} 

@-webkit-keyframes pulsate { 
     0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
     50% {opacity: 1.0;} 
     100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 

Ve ben Divicon sınıfının örneğinin değiştirdi:

// Define an icon called cssIcon 
var cssIcon = L.divIcon({ 
    // Specify a class name we can refer to in CSS. 
    className: 'css-icon', 
    html: '<div class="gps_ring"></div>' 
    // Set marker width and height 
    ,iconSize: [22,22] 
    // ,iconAnchor: [11,11] 
}); 

Aşağıdakiler işe yaradı: Şimdi CSS animasyonu çalıştırmak için iç html'u kullanıyorum. Bu işaretleyicinin yerini koruyacaktır. Ayrıca, dönüşümden sonra simgenin toplam boyutuna sahip olan iconSize özniteliğine de dikkat edin (21 px = ~ 18px x 1.2).

Çalışma Örneğin: http://jsfiddle.net/christianjunk/waturuoz/

Hala çözemedim, benim ilk yaklaşım niçin çalışmadığını bu şekilde koordine en hareketli çember onu merkezleri ayarlama.

Answer 2

Özgün yaklaşımınız işe yaramadı çünkü dönüştürmeyi kullandınız (Leaflet ayrıca işaretçileri yerleştirmek için de kullanıyor). üzerine bir broşür yerleştirme

Örnek:

transform: translate3d(499px, 604px, 0px);