Implementieren Sie einen gemeinsamen Elementübergang mit AngularJS

Question

Ich entwickle eine PhoneGap/Cordova-Anwendung mit AngularJS. Da meine Zielplattform Android ist, habe ich verschiedene Ansätze für Aktivitätsübergänge untersucht. Mit anderen Worten; Wie man den Übergang zwischen Form A und Form B animiert und gleichzeitig eine native und intuitive Benutzererfahrung bietet.

Meine Anwendung wird die Material-Design-Richtlinien implementieren und ich stolperte über eine Übergangsanimation namens "shared element transition", die ich denke, würde für die meisten meiner Bewerbungsabläufe perfekt funktionieren.

ich wirklich wirklich wie dieser Ansatz und wunderte mich darüber, wie eine Implementierung zu erreichen, auf Angular 1.5 basiert, die als generische und flexibel wie möglich ist und einfach über die Anwendung zu nutzen.

Da ich noch neu bei AngularJS bin, wollte ich mit der Community nach einem guten Weg suchen, etwas nach dem Vorbild der shared element transition zu implementieren oder vielleicht auf eine bereits existierende Implementierung zu verweisen.

Für diejenigen, die sich wundern, verwende ich Angular 1.5 und MaterializeCSS, um meine App zu ermächtigen. Vielen Dank!

Answer 1

Überprüfen Sie dieses Tutorial (fertige Komponente auch zu verwenden), animiert Helden Elemente zwischen verschiedenen Ansichten und pflegt richtige Routen.

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

Zusammenfassend hat der Held Element zwischen den beiden Ansichten werden transitioned existieren. Beim Übergang wird das Heldenelement vorübergehend in der Zielansicht verborgen, bis die Positionsanimation endet. Wird die Zielansicht direkt geladen (Refresh, Bookmark), findet keine Animation statt und das Heldenelement ist dort.