Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Cómo animar suavemente la altura en CSS o Javascript en dispositivos móviles

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

Esencialmente, cuando un usuario pulsa un botón, un cajón (una div con altura: 0px) debería animarse a una altura determinada (en píxeles) y el contenido se añadirá a ese cajón. Si tiene una cuenta de Pinterest, puede ver la animación tal como está ahora, en http://m.pinterest.com (toque el botón Comentario o Repin).

El desafortunado problema es que en los dispositivos móviles, Webkit Transitions no aceleran el hardware de la propiedad altura, por lo que es extremadamente laggy y la animación es dentada.

Estos 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. Capturas de pantalla : http://imgur.com/nGcnS,btP3W

Captura de pantalla de la pregunta

Estos son los problemas que encontré con Webkit Transforms que no puedo entender:

  1. Webkit transforma escala a los niños del contenedor, lo que es indeseable para lo que estoy tratando de hacer. -webkit-transform: none aplicado a los niños no parecen restablecer este comportamiento.
  2. Las transformaciones Webkit no mueven elementos hermanos. Por lo tanto, el contenedor .pin después de la que estamos operando no se mueve hacia abajo automáticamente. Esto se puede arreglar manualmente, pero es una molestia.

¡Muchas gracias!

  • ¿Es programáticamente posible que Google rastree la URL de referencia de una URL de Google Maps en un navegador móvil que abra una aplicación nativa?
  • ¿Cómo usar correctamente -webkit-device-pixel-ratio en iOS y Android?
  • Mp4 vídeo en html5 etiqueta de vídeo no se reproduce en el cromo móvil y safari móvil
  • PhoneGap - Teclado hace que la pantalla se vuelva negra y flickery durante algún tiempo en Samsung Galaxy Tab 10.1
  • 2 Solutions collect form web for “Cómo animar suavemente la altura en CSS o Javascript en dispositivos móviles”

    Con los teléfonos móviles tan rápido que es fácil olvidar que son realmente bastante humildes dispositivos cuando se comparan con el hardware de escritorio. La razón por la que su página es lenta, debido a la creación de reflujos:

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

    Cuando la div crece, tiene que empujar y recalcular las posiciones de todos los elementos, lo que es costoso para un dispositivo móvil.

    Sé que es un compromiso, pero la única manera de hacer la animación más suave es poniendo position: absolute en .comment_wrapper; O si realmente quieres mantequilla suave animación, hacer que aparezca desde debajo de la pantalla con css transforma, 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%)' }); 

    Usted quiere traslate3d. Debe utilizar la GPU si el dispositivo lo admite.

    mira esto…

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

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.