2012-03-16 41 views
15

Öğenin animasyonlu olup olmadığını kontrol etmenin bir yolu var mı?Öğenin animasyonlu olup olmadığını kontrol edin CSS3

Ama jQuery'nin canlandırılır ile değil animasyonlu ediliyor, ama CSS3 geçişi ile ..

I var sorun ... Ben vermek tıklayın oka, bu kaydırıcı var o

left = left+200 

sol ya

element.position().left 

veya

olduğu
parseInt(element.css("left")); 

(gerçekten önemli değil, sorun oluştuğunda ya) eleman önce tekrar o

transition: left 400ms ease-in-out; 
ok tıkladığında kez bu kadar

ve birlikte animasyonlu ediliyor

Animasyon biter, sola dönüş pozisyonuna bağlı olarak döner (yani yerine .. 400px, animasyonun ortasına tıklandığında 235.47px dönebilir).

+0

sen 400px bunu animasyon, o zaman etmez 235.47px size animasyonlu olduğunu söyledi mi? – pimvdb

+0

Ben 400px için canlandırıyorum, ben * geçerli sol * + 220px için canlandırıyorum, animasyon * sonra gerçekten * bilemiyorum * zaten animasyon * sonra sola zaten * olup olmadığını nasıl kontrol edebilirsiniz *. . – foxx

cevap

20

Bir öğenin left özelliğini değiştirdiğinizde ab ile ilişkilendirebilirsiniz onunla oolean değeri (örneğin, data() kullanarak) ve bir geçişin başladığını göstermek için true olarak ayarlayın. Ardından, transition end event'a (tarayıcınıza bağlı olarak değişir) bağlanabilirsiniz ve geçişin sona erdiğini göstermek için işleyicinizden Boole değerini geri false olarak ayarlayabilirsiniz.

sonuca

gibi bir şey olduğunu: (. Bir kez çalıştırmak zorunda yalnızca yukarıdaki kodu Not)

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).data("transitioning", false); // Transition has ended. 
    } 
); 


if (!yourElement.data("transitioning")) { 
    // No transition active, compute new position. 
    var theNewLeft = yourElement.position().left + 200; 
    // Set new position, which will start a new transition. 
    yourElement.data("transitioning", true).css("left", theNewLeft); 
} 
İlgili konular