cómo animar sin problemas la altura en CSS o Javascript en dispositivos móviles

Question

Estoy desarrollando una aplicación web HTML5 para dispositivos móviles y me encontré con un poco de problemas con las animaciones de alta calidad.

Esencialmente, cuando un usuario toca un botón, un cajón (un div con altura: 0px) debe animarse a una altura determinada (en píxeles) y el contenido se agregará a ese cajón. Si tiene una cuenta de Pinterest, puede ver la animación tal como está ahora, al http://m.pinterest.com (pulse el botón Comentar o Repintar).

El desafortunado problema es que en los dispositivos móviles, las transiciones no son Webkit acelerado por hardware de la propiedad de altura, por lo que su muy perezoso y la animación es irregular.

Éstos son algunos fragmentos de código:

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. Imágenes: http://imgur.com/nGcnS,btP3W

Estos son los problemas que tuve con Webkit transformaciones que no acabo de entender :

1. Webkit Transforma escala de los niños del contenedor, lo que no es deseable para lo que estoy tratando de hacer. -webkit-transform: none aplicado a los niños no parece restablecer este comportamiento.
2. Webkit Transforms no mueve elementos hermanos. Entonces, el contenedor .pin después del que estamos operando no se mueve automáticamente. Esto se puede arreglar manualmente, pero es una molestia.

Gracias mucho!

Answer 1

Con los teléfonos móviles de ser tan rápido que es fácil olvidar que en realidad son dispositivos muy humilde cuando se comparan con el hardware de escritorio. La razón por la que su página es lenta a causa de los reflujos de renderizado:

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

Cuando el div crece, se tiene que empujar y volver a calcular las posiciones de todos los elementos, lo cual es caro para un dispositivo móvil.

Sé que es un compromiso, pero la única manera de hacer que la animación más suave es mediante la posición que pone: absoluta de .comment_wrapper; o si realmente desea una animación suave como la mantequilla, haga que aparezca debajo de la pantalla con las transformaciones css, es decir

.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

Quiere traslate3d. Debe usar la GPU si el dispositivo lo admite.

mira esto ...

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