Animation in combination with Router

General
1

I didn’t found something about this in the documentation so maybe you can help me here.

I have a Navigator-Structure:

<Navigator ux:Name="innerNavigation" Transition="None">
  <Page ux:Name="a" />
  <Page ux:Name="b" />
  <Page ux:Name="c" />
</Navigator>

All my Pages have an ExitingAnimation because I set Transition to None:

<ExitingAnimation>
  <Change Page.Opacity="0" />
</ExitingAnimation>

When I change my pages with router.gotoRelative and router.pushRelative, everything is working fine.
But when I use router.goBack the ExitingAnimation is not getting called and the last page is placed behind the current (new) page.
Why is the ExitingAnimation not working in this case?

2

It all comes down to understanding what animation triggers are played, in what direction, when. See this section in Navigation docs for details. Here’s the important excerpt:

The Navigator works with the standard navigation animation system in Fuse. This means that page transitions are defined by the following triggers:

  • EnteringAnimation - played backwards for the entering page (the page becoming the active page)
  • ExitingAnimation - played forwards for pages replaced by a push
  • RemovingAnimation - played forwards for pages removed because of a goto

When you goBack(), the opposite happens:

  • EnteringAnimation - played forwards for the page being removed by a goBack
  • ExitingAnimation - played backwards for the page being restored by a goBack