Ionic 4 tabs animation transition

Ionic Framework
1

I’m trying to use ion-tabs on ionic 4. The navigation works, but with no animation transition

import { ModalPageModule } from './../modal/modal.module';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home/home.module#HomePageModule'
          }
        ]
      },
      {
        path: 'feed',
        children: [
          {
            path: '',
            loadChildren: '../feed/feed.module#FeedPageModule'
          }
        ]
      },
      {
        path: 'radio',
        children: [
          {
            path: '',
            loadChildren: '../radio/radio.module#RadioPageModule'
          }
        ]
      },
      {
        path: 'myaccount',
        children: [
          {
            path: '',
            loadChildren: '../myaccount/myaccount.module#MyaccountPageModule'
          }
        ]
      },
      {
        path: 'calendar',
        children: [
          {
            path: '',
            loadChildren: '../calendar/calendar.module#CalendarPageModule'
          }
        ]
      },
      {
        path: 'section',
        loadChildren: '../section/section.module#SectionPageModule'
      },
      {
        path: 'userlist',
        loadChildren: '../userlist/userlist.module#UserlistPageModule'
      },
      { path: 'payments', loadChildren: '../payments/payments.module#PaymentsPageModule' },
      { path: 'payment', loadChildren: '../payment/payment.module#PaymentPageModule' },
      { path: 'changepassword', loadChildren: '../changepassword/changepassword.module#ChangepasswordPageModule' },
      { path: 'info', loadChildren: '../info/info.module#InfoPageModule' },
      { path: 'user', loadChildren: '../user/user.module#UserPageModule' },
      
      { path: 'shepherdlist', loadChildren: '../shepherdlist/shepherdlist.module#ShepherdlistPageModule' },
      { path: 'shepherd', loadChildren: '../shepherd/shepherd.module#ShepherdPageModule' },
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    ModalPageModule
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <img src="assets/imgs/botao_home.png">
      <!-- <ion-icon name="home"></ion-icon> -->
    </ion-tab-button>
    <ion-tab-button tab="feed">
      <img src="assets/imgs/botao_feed.png">
      <!-- <ion-icon name="menu"></ion-icon> -->
    </ion-tab-button>
    <ion-tab-button (click)="openMail()">
      <img src="assets/imgs/botao_email.png">
      <!-- <ion-icon name="md-mail"></ion-icon> -->
    </ion-tab-button>
    <ion-tab-button tab="radio">
      <img src="assets/imgs/botao_radio.png">
      <!-- <ion-icon name="md-radio"></ion-icon> -->
    </ion-tab-button>
    <ion-tab-button tab="info">
      <img src="assets/imgs/botao_info.png">
      <!-- <ion-icon name="md-information-circle-outline"></ion-icon> -->
    </ion-tab-button>
    <ion-tab-button tab="myaccount">
      <img src="assets/imgs/botao_conta.png">
      <!-- <ion-icon name="md-person"></ion-icon> -->
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Works on pages outside tabs

ionic%20with%20effect
ionic with effect.gif324×548 1.18 MB

gif%20ionic%20no%20effect

2

Some screenshots, code or anything like that would be helpful, otherwise we can’t help you.

Cheers
Unkn0wn0x

5

Thanks for your code so far. Please edit your replies instead of adding an additional reply.

I can’t imagine the behavior, could you provide a “screencast”, what does not work? That would be very helpful.

Thanks so far
Unkn0wn0x

1 Like