Implementar una transición de elementos compartidos con AngularJS

Estoy desarrollando una aplicación PhoneGap / Cordova con AngularJS. Dado que mi plataforma de destino es Android, busqué diferentes enfoques para las transiciones de actividad. En otras palabras; Cómo animar la transición entre el formulario A y el formulario B, a la vez que proporciona una experiencia de usuario nativa e intuitiva.

Mi aplicación será la aplicación de las directrices de diseño de materiales y me topé con una animación de transición llamada " transición de elementos compartidos ", que creo que funcionaría perfectamente para la mayoría de mis flujos de aplicaciones.

Elemento compartido de transición

Realmente me gusta este enfoque y me preguntaba cómo lograr una implementación basada en Angular 1.5 que es tan genérica y flexible como sea posible y fácil de usar en toda la aplicación.

Dado que todavía soy nuevo en AngularJS, quería revisar con la comunidad para encontrar una manera ordenada de implementar algo a lo largo de las líneas de la transición de elementos compartidos o tal vez llegar a señalar una implementación ya existente.

Para aquellos que se preguntan, estoy usando Angular 1.5 y MaterializeCSS para potenciar mi aplicación. ¡Muchas gracias!

Compruebe este tutorial (componente listo para usar también), anima elementos de héroe entre diferentes vistas y mantiene las rutas adecuadas.

http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html

Para resumir, el elemento héroe tiene que existir entre las dos vistas que están siendo transicionadas. Durante la transición, el elemento héroe se oculta temporalmente en la vista de destino hasta que finaliza la animación de posición. Si la vista de destino se está cargando directamente (actualización, marcador), no se produce ninguna animación y el elemento héroe está allí.