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!

  • ¿Cómo usar correctamente -webkit-device-pixel-ratio en iOS y Android?
  • PhoneGap - Teclado hace que la pantalla se vuelva negra y flickery durante algún tiempo en Samsung Galaxy Tab 10.1
  • Css3 transformar rotate3d con la perspectiva no funciona en Android
  • Evento de clic de JQuery de un elemento div en li no disparado en Safari móvil
  • Background-size: cubierta que no funciona en el retrato en la tableta Android
  • ¿La vista Web de Android admite CSS3 WebKit Animations?
  • 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.