3

En una app desarrollada con cordova (para iOS y Android), uso transformaciones y transiciones de CSS para animar un menú y que se abra/cierre cuando se pulse en un botón. El código es algo como esto (simplificado):

document.getElementById("abrir").addEventListener("click", function() {
  document.getElementById("menu").className = "activo";
});

document.getElementById("cerrar").addEventListener("click", function() {
  document.getElementById("menu").className = "";
});
#menu {
  padding:10px;
  background:#dddddd;
  position:absolute;
  top:0;
  left:0;
  transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  transition:transform 1s, -webkit-transform 1s;
}

#menu.activo {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
<button id="abrir">Abrir menú</button>

<div id="menu">
  <h2>MENU</h2>
  <button id="cerrar">Cerrar menú</button>
</div>

La animación se ve bien cuando la pruebo en mi computadora, pero cuando corro la app en un dispositivo iOS, se ve a golpes. ¿Por qué ocurre eso? ¿Cómo puedo solucionarlo?

3
  • creo que te falta agregar los demas navagadores, solo incluiste webkit
    – userStack
    el 8 feb. 2017 a las 3:33
  • transform y -webkit-transform son suficiente para Android e iOS. Los demás navegadores no me importan al ser una app empaquetada con cordova/phonegap.
    – Alvaro Montoro
    el 8 feb. 2017 a las 3:40
  • Todas las apps que yo he hecho en cordova/phonegap desde siempre me han dado este mismo problema que comentas. Si las apps son sencillas que es solo html en realidad se pueden hacer las aplicaciones sin usar cordova/phonegap. Yo hago webviews locales con el paquete html sin usar cordova/phonegap y me funciona muy bien y además no tengo los problemas de que al cabo de unos meses android o ios me avisen que hay problemas de seguridad por culpa de cordova/phonegap. También me mejoran mucho las transiciones sin que haga estos destellos que comentas. el 8 feb. 2017 a las 8:06

2 respuestas 2

3

Te recomiendo que en vez de definir una transición para solo un aspecto, definas una para todos los aspectos de ese mismo elemento en tu estilo CSS.

Basándome en tu código:

#menu { 
    padding:10px; 
    background:#dddddd; 
    position:absolute; 
    top:0; 
    left:0; 
    transform: translate(0, -100%); 
    -webkit-transform: translate(0, -100%); 
    transition: ease 1s;
    -webkit-transition: ease 1s; /* "ease" es simplemente un efecto decorativo en la transición */
}

 #menu.activo { 
    transform: translate(0, 0); 
    -webkit-transform: translate(0, 0); 
}

Lo he probado y no me aparece ningún tipo de saltos en la animación, ¡espero que te sirva de ayuda! (Probado en iOS Safari y en Google Chrome)

2
  • He hecho pruebas con Cordova y parece que funciona sin problemas. Gracias
    – Alvaro Montoro
    el 8 feb. 2017 a las 13:02
  • De nada @Alvaro Montoro!
    – lromeraj
    el 8 feb. 2017 a las 13:03
1

Antes de probar la solución de Javi, también conseguí solucionar el problema usando translate3d en lugar de translate en el transform. Algo como esto:

#menu {
  padding:10px;
  background:#dddddd;
  position:absolute;
  top:0;
  left:0;
  transform: translate3d(0,-100%,0);
  transition:transform 0.5s;
}

#menu.active {
  transform: translate3d(0,0,0);
}

La idea la saqué de esta respuesta en SO, donde se indica que usar translate3d mejora el rendimiento de la transición porque hace que iOS use la aceleración hardware, y entonces ya no se ve la animación como si fuera a saltos sino de una manera suave.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.