Doing a nav.push to same page results in odd transition effect

Hey guys!

Working on an app that is a game of sorts with several levels, each level has roughly 20 questions.

Rather than make a page for each question I made a page for each level then subdivided that page in the template via angular’s switch statement as so:

<div id="level-2-screen-3" *ngSwitchCase="3"> // The content </div>
<div id="level-2-screen-4" *ngSwitchCase="4"> // The content </div>

The switch case in this instance is going off of the current question number.

This has worked well except for page transitions where because the question number is getting increased between nav.pushes that means that the ‘incoming’ page that’s coming in from left to right now looks the same as the ‘previous’ page. So it looks like the same page is overlapping itself.

The only solution I can come up with is to create an alt for each level that has the same code but which is alternated between nav.pushes, this way it’s always going to a new page…

So the page pushes would look like

Level1Page
Level1AltPage
Level1Page
Level1AltPage

as opposed to

Level1Page
Level1Page
Level1Page
Level1Page

Curious if anyone had a potentially better solution to this? Thanks!