Dealing with animations in page transitions in UWP

Question

In my app I am using OnNavigatingFrom and OnNavigatedTo events to modify state of my view, for instance reset state of view to initial. This causes problems with navigation - when user clicks button, he sees blink of page in initial state, when it is doing its leaving animation. How I should code my UI to deal with this?

Page flow:

1. OnNavigatingTo is called
2. User does job on page
3. User clicks button to navigate away
4. OnNavigatingFrom is called
5. Page resets UI to initial state
6. ContentFrame starts to play output animation (user sees briefly page 1. state)
7. ContentFrame switches to new page

Repro: https://github.com/ShadowDancer/uwp.transitions.repro.git

Answer 1

In UWP, page transitions have connection animations by default. If this connection animation is bothering you, you can try to modify it.

myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

If you want to learn more about page connect animation, check out this document: Page transitions.

---

Update

I checked your project code. In OnNavigatingFrom, you reset the page state, which caused the state to change during the page connection animation.

Functionally, I suggest that you write the code to rewrite the page state in the OnNavigatedTo event, to rewrite the page state each time you navigate to the page, without having to listen to the OnNavigatingFrom event.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SetState(false);
    base.OnNavigatedTo(e);
}

---

Update

There is another method, which is to delay the state change. Switch state after ensuring page animation is complete

protected async override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    await Task.Delay(500);
    SetState(false);
    base.OnNavigatingFrom(e);
}