example browseranimationsmodule animations animation angularjs cordova phonegap-build

browseranimationsmodule - angular core animations



Angular Animations y Phonegap no se ejecutan en el móvil (2)

He agregado algunas animaciones ng-view (angular v 1.1.5) a una aplicación de phonegap. Funcionan muy bien en el navegador al probar la ondulación y al señalar el navegador del teléfono móvil (Android Chrome en este caso) a la aplicación en línea, pero cuando se instala con phonegap, las animaciones no se ejecutan. No estoy seguro si el problema es con phonegap o con angular. Al principio pensé que solo estaba animando demasiado rápido, así que los reduje a 1.5, pero no hizo ningún cambio en la aplicación.

¿Se trata de un problema de brecha en el teléfono, un problema angular y / o cómo podemos usarlos?

Animación CSS definida:

.view-enter, .view-leave { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; } .view-enter { opacity:0; } .view-enter.view-enter-active { opacity:1; } .view-leave { opacity:1; } .view-leave.view-leave-active { left:-100px; opacity:0; }

Nuevamente, estos funcionan bien en el navegador del teléfono, pero no cuando está dentro de la aplicación de phonegap. Usando Adobe construir para construir la aplicación. También estoy recuperando el css y visualizándolo en la página solo para confirmar que el archivo css real está incluido en la compilación de phonegap (es).

Por uno de los comentarios del usuario, aquí está el HTML. El resto es manejado por animaciones por defecto de angular. Funcionan bien cuando se ejecutan en un navegador, pero no cuando se ejecutan dentro de phonegap. El enrutamiento funciona, la vista ng se cambia, pero la animación nunca ocurre.

<div class="container-fluid" id="viewer" ng-view ng-animate="{enter: ''view-enter'', leave: ''view-leave''}" > </div>

Probado en Nexus 4.


Este es definitivamente un problema con el navegador de Android 4.2. La primera pista es que funciona bien en el escritorio y en Chrome, pero no en Phonegap: InAppBrowser usa el navegador de Android.

El soporte para animaciones (y HTML5 en general) fue bastante terrible en Android 4.2. Aquí hay un resumen práctico de esas peculiaridades.

¡Esperamos que hayas podido actualizar tu versión de Android desde junio!


Puede considerar CocoonJS (funciona con Cordova) o Crosswalk como rutas para acelerar todo tipo de lentitud relacionada con el navegador cuando se implementa en Android más antiguos.