[Solved] Transition slow/bug? NavController

Ionic Framework ionic-v3
1

I made this code and when navcontroller change the page something not working well.
The problem(looks like the css isn’t done when the page appear):

image
problema.gif638×930 1.29 MB

The idea is: the header is the same for the pages
home.ts

import { Component,/* ViewChild, ElementRef animate, trigger, state, transition, style*/ } from '@angular/core';
import { NavController, /*NavParams,ViewController,*/ ModalController, Platform  } from 'ionic-angular';
import { ModalPage } from '../modal/modal';
import { NativeStorage } from '@ionic-native/native-storage';

import { ItemsProvider } from '../../providers/items/items';
import { LoginPage } from '../login/login';
import { NextPage } from '../next/next';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'

})
export class HomePage {

  isLogged: boolean = false;
  items: Array<string>;
  constructor(public navCtrl: NavController, public modalCtrl: ModalController, private itemprovider: ItemsProvider, private plat: Platform, private nativeStorage: NativeStorage) {
    console.log("HOME constructor");
    this.items=[];
    this.itemprovider.createDatabase();
  }

buttonClick(item) {
    this.navCtrl.push(NextPage,{item: item});

  }

home.html



<ion-header hide-nav-bar="true">
  <ion-navbar color="myfundo">
    
    <h1 class="title" >my<span class="setlist">Setlist</span></h1>
  </ion-navbar>


</ion-header>

<ion-content padding>
  <ion-list>



<ion-item-sliding>
  <ion-item (click)="buttonClick()">Teste
  <ion-badge color="danger" item-end>12</ion-badge>
  </ion-item>
  <ion-item-options>
    <button ion-button color="danger" (click)="archive(post)">Apagar</button>
  </ion-item-options>
</ion-item-sliding>

  <!-- Sliding item -->
  <ion-item-sliding *ngFor="let item of items">
    <button ion-item (click)="buttonClick(item)">
    {{item}}
      <p class="list-product-category">Sem Categoria</p>
    </button>
    <ion-item-options>
      <button ion-button color="danger" (click)="archive(item)">Apagar</button>
    </ion-item-options>
  </ion-item-sliding>



</ion-list>

</ion-content>

<ion-footer >
  <div >

 <button class="button-float" ion-button fab-center icon-only large (click)="presentPopover($event)">
 <ion-icon ios="ios-add" md="md-add"></ion-icon>
 </button>

</div>
  <ion-toolbar>

</ion-toolbar>
</ion-footer>

home.scss (lot of garbage)

page-home {
$assertive :#ef473a;
.button-float{
  background: $assertive !important;
  color:white !important;
  z-index: 12 !important;
  position: absolute !important;
  bottom: 10px !important;
  //right: 10px !important;
  margin-left: 45%;
  border-radius: 50% !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transition: 0.2s linear !important;
  transition: 0.2s linear !important;
  -webkit-transition-property: -webkit-transform, all !important;
  transition-property: transform, all !important;

}

.button-float:hover{
  -webkit-transform: translate3d(0, -1px, 0)  !important;
  transform: translate3d(0, -1px, 0) !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4) !important;
    background: darken($assertive, 10%) !important;
}
.title-empty {
  position: relative;

  width: 100%;
  height: 45%;
  background-color: #653ca5;
  font-family: "Signika Light";
  text-align: center;
  padding: 25% 0 0 0;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.81);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.81);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.81);
}

.arrow {
  width: 8%;
  padding-top: 20px;
}

.user-name {
  color: #fff;
  //margin-top: 15%;
  opacity: 0;
  font-size: 20px;
}

.space15 {
  margin-top: 15%;
}
.info-text {
  color: #909fa7;
  background-color: #e7e7e7;
  font-family: "Maven Pro";
  text-align: center;
  margin-top: -10%;
  //  position: relative;
  //  padding: 20% 10% 60% 10%;
  //  margin-top: 2%;
  //opacity: 0;
}

.info-text button {
  color: #fff;
  background-color: #09dcb2;
  margin-top: 55%;
  border-radius: 100%;
  border-style: none;
  box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.2);
}

.info-text p {
  font-size: 18px;
}

.setlist {
  color: #fff;
  font-size: 40px;
  font-family: "Signika Semibold";
}

.title {

  font-size: 32px;
  color: #09dcb2 !important;
  font-family: "Signika Semibold";
  width: 100%;
  height: 100%;
  text-align: center;
}

ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 90px 1px;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 32px;
  color: #09dcb2 !important;
  font-family: "Signika Semibold";
}

ion-header {
  background: #653ca5;
}

.toolbar-background {
    border: 1px !important;

}

.list-product-category {
  position: relative;
  padding: 7% 0% 0% 5%;
  font-family: "Maven Pro";
  color: #cbcbcb;
  font-size: 12px;
}

ion-content{
    background-image: url('imgs/fundo.svg');
    position: absolute;
}

.loginBtn {
  margin-bottom: 10px;
}

.loginbkg {
  background-image: url('../../imgs/fundo.svg');
// background: url('../../img/getstart.png');
background-repeat: no-repeat;
background-size:cover;

}



}

NextPage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the DealPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-deal',
  templateUrl: 'deal.html',
})
export class DealPage {
  item: string;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.item = this.navParams.get('item');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DealPage');
  }

}

nextpage.html

<!--
  Generated template for the DealPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header hide-nav-bar="true">
  <ion-navbar color="myfundo">
    <h1 class="title" >my<span class="setlist">Setlist</span></h1>
  </ion-navbar>
</ion-header>


<ion-content padding>
{{item}}
</ion-content>

nextpage.scss = home.scss

2

I have the same problem. There is already a solution?

3

@onehit0711 Yes, there is…
set animate to false in push and pop action:

navCtrl.push(YourPage,{},{animate: false}) ;

and to pop:

  1. in your html code set hideBackButton to true:
<ion-navbar hideBackButton="true">
    <button (click)="toBack()" ion-button icon-only clear small>
    <ion-icon name="arrow-back"></ion-icon>
    </button>
  </ion-navbar>

and in your ts code:

  this.navCtrl.pop({animate: false});

Whether you have the same header on every page, you should generate a component.

4

What if you have a navbar on the second page but when hitting the back button to go back to the first page there won’t be a navbar for the first page? Since there is not one the shadow of the navbar hangs, but I don’t want to completely get rid of the transition.