使用 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

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