Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: When the tabs property of ion-router-outlet is set to true, the navigation animation does not work

See original GitHub issue

Bug Report

Ionic version:

[ ] 4.x [o] 5.x [ ] 6.x

Current behavior:

I am customizing the tab component (using angular routing navigation). In order to reuse the status of each tab (component), I set the tabs property of ion-router-outlet to true. When the tabs property of ion-router-outlet is set to true, the navigation animation does not work (When the tabs property of ion-router-outlet is set to false, the navigation animation can work).

Expected behavior:

When the tabs property of ion-router-outlet is set to true, the navigation animation should work normally

Steps to reproduce:

Related code:

<ion-router-outlet class="router-outlet" tabs="true" [animation]="slide(routerOutlet)"></ion-router-outlet>

Other information:

Ionic info:

insert the output from ionic info here

Issue Analytics

State:
Created 2 years ago
Comments:13 (5 by maintainers)

Top GitHub Comments

1reaction

HyperLife1119commented, Jul 16, 2021

OK, thank you!

1reaction

HyperLife1119commented, Jul 15, 2021

do not forget me @liamdebeasi

Top Results From Across the Web

Bug: Ionic 4 Strange flickering on page navigation transitions ...

Expected behavior: The navigation should happen with a clean transition, not flickering to the previous page. Steps to reproduce:.

Ionic4 native page transitions not working on router navigate

There are two ways to accomplish this. The first way is using the Angular Animation. The second way is the Native Page Transitions...

React Navigation - Ionic Framework

The React Navigation guide covers routing in an app built with Ionic and React. ... React Router requires full paths, and relative paths...

Animation | Jetpack Compose - Android Developers

Overview. Animations are essential in a modern mobile app in order to realize a smooth and understandable user experience. Many Jetpack Compose Animation...

Navigating the Change with Ionic 4 and Angular Router

In this tutorial we will look at the new navigation system inside Ionic Framework 4.0 to learn how to use the powerful CLI,...