CSS3 przejścia dynamicznie tworzone elementy

Próbuję ożywionej dynamicznie utworzony element HTML z CSS3 przejścia.CSS3 przejścia dynamicznie tworzone elementy

Chcę, aby animacja została uruchomiona tuż przed utworzeniem elementu.
Dla nich utworzyć klasę, która ustawiona oryginalnego położenia elementu, a następnie ustawić pozycję docelową przez jquery css() metoda

ale nowy element to właśnie apears w pozycji docelowej bez przechodzenia .

Jeśli użyję setTimeout 0ms, aby ustawić nową wartość css, to działa.

Coś robię źle? lub jest ograniczeniem? Nie sądzę, żebym musiał użyć obejścia setTimeout.

Dzięki!

UPDATE: Oto link z kodem uruchomionym na jsfiddle.net do eksperymentowania. http://jsfiddle.net/blackjid/s9zSH/

UPDATE Zaktualizowałem przykład rozwiązaniem w odpowiedzi.
http://jsfiddle.net/s9zSH/52/

Oto w pełni działa przykładowy kod

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

Źródło

2010-10-19 blackjid

Nie trzeba korzystać z limitu czasu. Limit czasu działa, ponieważ strona jest zmieniana między ustawieniami stylów. Ponowne przeliczanie przelicza style. Jeśli nie przeliczysz stylów, drugi styl po prostu nadpisze pierwszy. To jest prawdziwy problem.

Przeciwnie, można po prostu:

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

Jeśli animowanie wielu obiektów, trzeba tylko "pompa" kalkulatora stylu jednorazowo:

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

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

Testowany w chrome12 na mac

Źródło

2011-08-02 20:38:27 mmaclaurin

Dodatek: podczas gdy nie trzeba używać limitu czasu, czasami może być dobre. to naprawdę zależy od twojej aplikacji. Wymuszenie synchronicznej rekalkulacji stylów, jeśli jest wykonywane często, może spowodować, że Twój JAknie się jąka. jeśli się to zdarzy, rozsądnie wykorzystaj timeout, aby rozbić/zlikwidować złożoną animację w kilku klatkach. – mmaclaurin

Dziękuję, to pierwsze wyjaśnienie, jakie znalazłem * dlaczego * setTimeout jest skuteczny w wymuszaniu przejść CSS. –

Wow, świetnie! Uratowałeś mi dzień. Zmarnowano sporo czasu, aby znaleźć przyczynę, w końcu to rozwiązałeś. dzięki jeszcze raz! –

CSS3 przejścia dynamicznie tworzone elementy

Odpowiedz

Powiązane problemy