CSS3 geçişleri dinamik elemanlar

Ben CSS3 geçişleri ile canlandırılır dinamik olarak oluşturulan html öğesi çalışıyorum oluşturulan etmek.CSS3 geçişleri dinamik elemanlar

Animasyonun, eleman oluşturulmadan hemen önce başlamasını istiyorum. Bunlar için
i elemanının orijinal pozisyonunu ayarlamak ve sonra jquery Css() yöntem

Ama herhangi bir geçiş olmadan hedef pozisyonunda apears yeni elemanı tarafından hedef konumunu ayarlamak bir sınıf oluşturmak .

Yeni css değerini ayarlamak için 0ms setTimeout kullanırsam çalışır.

Yanlış yaptığım bir şey var mı? veya bir sınırlama mı? Ben setTimeout geçici çözümünü kullanmam gerektiğini düşünmüyorum.

Teşekkürler!

UPDATE: İşte deneme için jsfiddle.net üzerinde çalışan kod ile bir bağlantıdır. http://jsfiddle.net/blackjid/s9zSH/

GÜNCELLEME ben cevap çözümü ile örnek güncelledik.
http://jsfiddle.net/s9zSH/52/

İşte tam bir çalışma örneği kod Bir zaman aşımı kullanmaya gerek yoktur

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
     <script type="text/javascript"> 

     //Bind click event to the button to duplicate the element 
     $(".duplicate").live("click", function (e){ 
      var $to = $("#original .square").clone() 
      $("body").append($to); 
      if($(e.target).hasClass("timeout")) 
       //With setTimeout it work 
       setTimeout(function() { 
        $to.css("left", 200 + "px"); 
       },0); 
      else if($(e.target).hasClass("notimeout")) 
       // These way it doesn't work 
       $to.css("left", 200 + "px"); 
     }); 

     </script> 
     <style type="text/css"> 
     .animate{ 
      -webkit-transition: all 1s ease-in; 
     } 
     .square{ 
      width:50px; 
      height:50px; 
      background:red; 
      position:relative; 
      left:5px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="original"> 
      <div class="square animate"></div> 
     </div> 

     <button class="duplicate timeout">duplicate with setTimeout</button> 
     <button class="duplicate notimeout">duplicate without setTimeout</button> 
    </body> 
</html>

kaynak

2010-10-19 blackjid

olduğunu. Zaman aşımı, sayfa ayar stilleri arasında yeniden aklandığından çalışır. Yeniden doldurma stilleri yeniden hesaplar. Stilleri yeniden hesaplamazsanız, ikinci stil basitçe ilkin üzerine yazar. Bu asıl mesele.

Aksine, sadece can: mac

üzerine chrome12 test edilmiştir

obj.className = style1; 
obj2.className = style1; 
obj3.className = style1; 
window.getComputedStyle(obj).getPropertyValue("top"); 

obj.className = style2; 
obj2.className = style2; 
obj3.className = style2;

: Birden fazla nesne animasyon ediyorsanız

obj.className = style1; 
window.getComputedStyle(obj).getPropertyValue("top"); 
obj.className = style2;

, sadece bir kez için "pompa" tarzı hesap makinesi ihtiyaç

kaynak

2011-08-02 20:38:27 mmaclaurin

addendum: Zaman aşımı kullanmak zorunda kalmazsınız, bazen iyi olabilir. gerçekten uygulamanıza bağlı. Sıklıkla yapılırsa, stilleri senkronize yeniden zorlama, UI kekelenizi yapabilirsiniz. Bunu fark ederseniz, birkaç kareden karmaşık bir animasyonu kırmak/amorti etmek için zaman aşımı kullanın. – mmaclaurin

Teşekkür ederim, bu bulduğum ilk açıklama * Neden * bir setTimeout CSS geçişlerini zorlamak için etkilidir. –

Vay, harika! Günümü kurtardın. Nedeni bulmak için epey zaman harcadım, sonunda çözdün. Tekrar teşekkürler! –

cevap

İlgili konular