Angular 2 shared element router Transition animation

Viewed 670

I would like to create a transition between routes where some elements are shared but am unsure of what the best way to go about this in angular 2+ (currently on 5) is.

Ive attached a mockup animation and some basic requirements

  • plant.com/plants shows a list of plant thumbnails in a grid
  • plant.com/plant/3 shows a detail view of plant id 3, you should be able to navigate straight to this view. navigating to/from this page should transition smoothly between detail and thumbnail views.
  • closing this view should return the thumbnail to its place in the grid

any points in the right direction would be appreciated, thank you

router transition mockup

0 Answers
Related