NativeScript:如何在视图之间共享和动画组件?

NativeScript: How to share and animate component between views?

我需要使用 NativeScript + Angular 开发一个可以在两个视图之间共享组件的平板电脑应用程序。该组件应保留在屏幕上,并在视图之间的转换期间进行动画处理。

为了更清楚起见,我对预期的界面进行了快速成像:

我从 NativeScript 开始。我的理解是,在地图和详细信息视图中设置相同的组件不会按照我想要的方式对其进行动画处理。

对于 Web 应用程序,我只使用水平视图溢出屏幕,并使用适当的 CSS 动画进行过渡。我可以尝试用 NativeScript 模仿同样的东西。

我的两个问题很简单:

– 在 NativeScript 中实现这种转换是否是一种更好、更惯用的方式?

– 如果不是,您会为此使用哪些 UI 元素 – 考虑到用户不应该自己滚动。滚动由应用程序处理。

我可能会增加一定程度的复杂性,即地图、列表和项目详细信息在 phone 和从 phone 查看的 Web 应用程序上将是三个不同的屏幕。用于计算机的 Web 应用程序看起来就像在平板电脑上一样。一个能让我在所有平台上使用相同代码的解决方案更好。

谢谢。

在 NS 中,您可以设置动画 transform: translate(x and y)。您可以利用 angular 动画来实现 2 种状态:空闲和项目选择。您甚至可以显示返回按钮以返回视图。

对于 phone 上的屏幕项目,您可以只为每个视图使用组件并将它们分别安装在每个屏幕上,您可以使用不同的平台布局来做到这一点。

项目: https://github.com/vjoao/ns-animation-example