come animare senza problemi altezza in CSS o Javascript sui dispositivi mobili

Question

Sto sviluppando un'applicazione web HTML5 per i dispositivi mobili e sono imbattuto in un po 'di problemi con animazioni fluide.

In sostanza, quando un utente tocca un pulsante, un cassetto (un div con altezza: 0px) deve animare a una determinata altezza (in pixel) e il contenuto verrà aggiunto a quel cassetto. Se si dispone di un account Pinterest, è possibile visualizzare l'animazione così com'è ora, al numero http://m.pinterest.com (toccare il pulsante Commento o Ripeti).

Il problema sfortunato è che sui dispositivi mobili, le Transizioni Webkit non sono ad accelerazione hardware della proprietà height, quindi è estremamente laggy e l'animazione è frastagliata.

Ecco alcuni frammenti di codice:

1. HTML: ...

   <div class="pin"> 
       <a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a> 
       <div class="comment_wrapper"> 
        <div class="divider bottom_shadow"></div> 
        <div class="comment"> 
         <!-- Content appended here --> 
        </div> 
        <div class="divider top_shadow" style="margin-top: 0"></div> 
       </div> 
   </div> 
   
   <div class="pin"> ... </div> 
   

2. CSS:

   .comment_wrapper { 
       -webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out; 
       position: relative; 
       overflow: hidden; 
       width: 100%; 
       float: left; 
       height: 0; 
   } 
   
   
   .comment { 
       background: #f4eeee; 
       margin-left: -10px; 
       padding: 10px; 
       height: 100%; 
       width: 100%; 
       float: left; 
   } 
   

3. Javascript (usando jQuery):

   function showSheet(button, wrapper, height) {  
       // Animate the wrapper in. 
       var css = wrapper.css({ 
        'height': height + 'px', 
        'overflow': 'visible', 
        'margin-bottom': '20px', 
        'margin-top': '10px' 
       }); 
   
       button.addClass('pressed'); 
   } 
   
   $('.comment_btn').click(function() { 
       showSheet($(this), $(this).siblings('.comment_wrapper'), 150); 
   }); 
   

4. Screenshots: http://imgur.com/nGcnS,btP3W

Qui ci sono i problemi che ho incontrato con Webkit trasformazioni che non riesco a capire :

1. Webkit Transforms ridimensiona i figli del contenitore, il che è indesiderabile per quello che sto cercando di fare. -webkit-transform: none applicato ai bambini non sembra resettare questo comportamento.
2. Le trasformazioni di Webkit non spostano elementi di pari livello. Quindi, il contenitore .pin dopo quello su cui stiamo operando non si sposta automaticamente verso il basso. Questo può essere risolto manualmente, ma è una seccatura.

Grazie mille!

Answer 1

Con i telefoni cellulari di essere così veloce che è facile dimenticare in realtà sono dispositivi abbastanza umili quando li si confronta con l'hardware desktop. Il motivo per cui la pagina è lento a causa di rimborsi di rendering:

http://code.google.com/speed/articles/reflow.html

Quando il div cresce, deve spingere e ricalcolare le posizioni di tutti gli elementi, che è costoso per un dispositivo mobile.

Lo so che è un compromesso, ma l'unico modo è possibile rendere l'animazione più fluida è di posizione che pone: assoluta .comment_wrapper; o se vuoi davvero un'animazione fluida, rendila pop-up da sotto lo schermo con le trasformazioni css, ad es.

.comment_wrapper { 
    height: 200px; 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    -webkit-transform: translate(0, 100%); 
} 


var css = wrapper.css({ 
    '-webkit-transform': 'translate(0, 100%)' 
}); 

Answer 2

Si desidera traslate3d. Dovrebbe usare la GPU se il dispositivo lo supporta.

Check this out ...

http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/