Website-Suche

angular - Seitenübergangsanimation in Ionic 2

Ich habe eine einfache Tabs-Vorlagenanwendung in Ionic 3, in der ich zwischen den Tabs wechsle, wann immer der Benutzer auf der Ansicht nach links oder rechts wischt. Ich wechsle zwischen den Tabs, und alles funktioniert einwandfrei, außer dass es keine Animationseffekte gibt, wenn der Seitenübergang durch Tippen auf die Tabs oder durch Wischen auf dem Bildschirm erfolgt.

Ich bekomme die Animation für das Ein- und Ausblenden von Seiten

this.navCtrl.push(ContactPage, {
    animation: true, direction: 'forward'
});

aber nicht zum Auswählen von Tabs

this.navCtrl.parent.select(2,{
    animation: true, direction: 'forward'
});

Vielen Dank im Voraus

Antwort #1

Das ist derzeit mit Ionic nicht möglich, aber Sie können dieses erstaunliche Plugin verwenden, um so etwas zu erreichen:

Um es zu installieren, einfach ausführen

npm i --save ionic2-super-tabs

Und importieren Sie dann SuperTabsModule.forRoot() in das Hauptmodul Ihrer App

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
    ...
    imports: [
      ...
      SuperTabsModule.forRoot()
      ],
    ...
})
export class AppModule {}

Jetzt ist alles bereit, also können Sie in Ihrer Ansicht so etwas tun:

<super-tabs>
  <super-tab [root]="page1" title="First page" icon="home"></super-tab>
  <super-tab [root]="page2" title="Second page" icon="pin"></super-tab>
  <super-tab [root]="page3" title="Third page" icon="heart"></super-tab>
</super-tabs>

Antwort #2

Späte Antwort, könnte aber für zukünftige Nutzer nützlich sein. Sie können Übergangsanimationen mit diesem Code erreichen. Dieser Frage-Titel & die Beschreibung sind unterschiedlich. Deshalb poste ich die Antwort für den Titel

goTo(page, params) {  //params are optional leave blank {} if you are not sending data
    this.navCtrl.push(page, { params: params }, { animate: true, animation: 'transition', duration: 500, direction: 'forward' });
}

goBack(){
    this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
}

Hinweis - Wenn Sie BackButton in Navbar sind, tun Sie dies

import {ViewChild } from '@angular/core';
import { Navbar } from 'ionic-angular';  

//create global variable
@ViewChild(Navbar) navBar: Navbar;

//inside ionViewDidLoad override back button
ionViewDidLoad() {
console.log('ionViewDidLoad ProductPage');
this.navBar.backButtonClick = (e: UIEvent) => {
        // todo something
        console.log("Back Back");
        this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'});
    }
}

Wenn Sie andere Animationen benötigen, können Sie diesem Artikel folgen, der eine gute Umsetzung der Ionic-Native-Übergänge ist, aber diese funktionieren nur auf dem Gerät, nicht im Browser.

Verwandte Artikel