NativeScript: How to share and animate component between views?

0
votes

I need to develop with NativeScript + Angular a tablet application that would share a component between two views. The component should remain on screen, and be animated during the transition between the views.

I made a quick image of the intended interface, to be clearer:

Transition explanation

I'm beginning with NativeScript. What I understand is that setting the same component inside both map and detail views would not animate it the way I want.

For a web application, I would just use a horizontal view overflowing the screen with the proper CSS animations for the transition. I could try to mimic the same with NativeScript.

My two questions would be simple:

– Is it a better, more idiomatic way to achieve this transition in NativeScript?

– If not, which UI elements would you use for that matter – considering that the user shouldn't be able to scroll by himself. The scroll is taken care of by the application.

I might add a level of complexity saying that the map, list and item details would be three different screen on a phone, and on the web app viewed from the phone. The web app for computers would look like on tablets. A solution that would allow me to use the same code on all platforms be even better.

Thanks.

1
angularnativescriptangular2-nativescript

1 Answers

1
votes

In NS you have the ability to animate transform: translate(x and y). You can leverage angular animations to do that with 2 states: idle and item-selected. You could even show a back button to come back to the view.

For the items to be screens on a phone, you could just use components for each view and mount them separately on each screen and you can use different platform layouts to do that.

The project: https://github.com/vjoao/ns-animation-example