使用AngularJS实现共享元素转换

Question

我正在使用AngularJS开发PhoneGap / Cordova应用程序。由于我的目标平台是Android，因此我研究了不同的活动转换方法。换一种说法;如何设置表单A和表单B之间的过渡动​​画，同时提供原生和直观的用户体验。

我的应用程序将实现材料设计指南，我偶然发现了一个名为“shared element transition”的过渡动画，我认为这对我的大多数应用程序流程都是完美的。

我实际上非常喜欢这种方法，并且想知道如何实现基于Angular 1.5的实现，该实现尽可能通用且灵活，并且易于在整个应用程序中使用。

由于我还是AngularJS的新手，我想与社区一起回顾一下，找到一种实现shared element transition的方法的巧妙方法，或者可以指向现有的实现。

对于那些想知道的人，我正在使用Angular 1.5和MaterializeCSS来支持我的应用程序。非常感谢你！

Answer 1

检查本教程（也可以使用现成的组件），它可以激活不同视图之间的英雄元素，并维护正确的路径。

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

总而言之，必须在要转换的两个视图之间存在hero元素。转换时，英雄元素暂时隐藏在目标视图中，直到位置动画结束。如果直接加载目标视图（刷新，书签），则不会发生任何动画，并且英雄元素就在那里。