使用AngularJS实现共享元素过渡

Question

使用AngularJS实现共享元素过渡

javascriptandroidangularjscssuser-interface

4

我正在使用AngularJS开发PhoneGap/Cordova应用程序。由于我的目标平台是Android，因此我研究了不同的活动转换方法。换句话说;如何在提供本地和直观的用户体验的同时，对A表单和B表单之间的转换进行动画处理。

我的应用程序将实现材料设计指南，并且我偶然发现了一种名为“共享元素转换”的过渡动画，我认为它适用于我的大多数应用程序流程。

我实际上非常喜欢这种方法，并且想知道如何基于Angular 1.5实现一个尽可能通用、灵活且易于在整个应用程序中使用的实现。由于我还是AngularJS的新手，所以我想向社区请教一种实现类似shared element transition的简洁方法，或者可能会指向已经存在的实现。对于那些想知道的人，我正在使用Angular 1.5和MaterializeCSS来增强我的应用程序。非常感谢！

- Christopher Klewes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Varit J Patel · Accepted Answer

请查看这个教程（也可以使用现成的组件），它可以将主角元素在不同视图之间进行动画处理，并保持正确的路由。 http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html 简而言之，主角元素必须存在于两个过渡的视图之间。在过渡时，主角元素在目标视图中暂时隐藏，直到位置动画结束。如果直接加载目标视图(刷新、书签)，则不会发生动画，主角元素仍然存在。