Come eseguire le transizioni tra le pagine a schede in Ionic Framework

Question

All'interno di Ionic Framework è possibile configurare le schede. Le pagine all'interno delle schede possono facilmente passare utilizzando una "diapositiva sinistra-destra" o un altro tipo di transizione. Questo rende l'applicazione liscia e pensata.

Il problema che ho è che le pagine associate a ogni scheda, una volta cliccato dal menu scheda, non transizioni affatto, c'è solo "boom": una pagina.

Ho trovato una penna sul codice (link to codepen demo) che può replicare questo effetto come lo voglio (in una certa misura), ma non riesco a replicarlo in nessuno scenario, tanto meno la versione di Ionic rc0 (1.0).

Il codice codepen utilizza un'animazione che sembra non funzionare altrove:

<ion-nav-view animation="slide-left-right"></ion-nav-view>

Si prega di assist.

Answer 1

non ho trovato a quell'esempio esatto di lavoro, ma ho ottenuto un effetto simile in una delle mie applicazioni, dando tutte le schede lo stesso nome della vista:

app.js

$stateProvider 
.state('signin', { 
    url: "/sign-in", 
    templateUrl: "sign-in.html", 
    controller: 'SignInCtrl' 
}) 
.state('forgotpassword', { 
    url: "/forgot-password", 
    templateUrl: "forgot-password.html" 
}) 
.state('tabs', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "tabs.html" 
}) 
.state('tabs.home', { 
    url: "/home", 
    views: { 
    'tab-view': { 
     templateUrl: "home.html", 
     controller: 'HomeTabCtrl' 
    } 
    } 
}) 
.state('tabs.facts', { 
    url: "/facts", 
    views: { 
    'tab-view': { 
     templateUrl: "facts.html" 
    } 
    } 
}) 
.state('tabs.facts2', { 
    url: "/facts2", 
    views: { 
    'tab-view': { 
     templateUrl: "facts2.html" 
    } 
    } 
}) 
.state('tabs.about', { 
    url: "/about", 
    views: { 
    'tab-view': { 
     templateUrl: "about.html" 
    } 
    } 
}) 

tabs.html

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right"> 

    <ion-tab title="Home" icon="ion-home" href="#/tab/home"> 
     <ion-nav-view name="tab-view"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about"> 
     <ion-nav-view name="tab-view"></ion-nav-view> 
    </ion-tab> 

    </ion-tabs> 

Avviso il nome "scheda-view" per ogni stato e di nuovo come attributo nome sul ion-nav-view in ogni scheda.

Answer 2

Questo mi ha aiutato a trovare una soluzione https://github.com/driftyco/ionic/issues/2997. Il trucco è caricare tutte le schede in un'unica vista. Non è possibile utilizzare la direttiva di ioni-schede per il raggiungimento di tale, si dovrete creare il vostro contenitore scheda utilizzando HTML normale:

<ion-view title="Tabs Controller"> 
<!-- All tabs are going to load here --> 
<ion-nav-view name="menuContent"></ion-nav-view> 

<!-- TABS --> 
<div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard"> 
    <div class="tab-nav tabs"> 
     <a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}"> 
      <i class="icon bb-ios-forums"></i> 
      <span translate="TABS.FORUMS_TAB"></span> 
     </a> 
     <a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }"> 
      <i class="icon bb-ios-forums"></i> 
      <span translate="TABS.GROUPS_TAB"></span> 
     </a> 
     <a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }"> 
      <i class="icon bb-ios-topics"></i> 
      <span translate="TABS.TOPICS_TAB"></span> 
     </a> 
     <a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }"> 
      <i class="icon bb-ios-notifications"></i> 
      <span translate="TABS.NOTIFICATIONS_TAB"></span> 
     </a> 
     <a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }"> 
      <i class="icon bb-ios-my-profile"></i> 
      <span translate="TABS.MY_PROFILE_TAB"></span> 
     </a> 
     <a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }"> 
      <i class="icon bb-ios-more"></i> 
      <span translate="TABS.MORE_TAB"></span> 
     </a> 
    </div> 
</div> 

il controller schede dovrebbe essere simile a questo:

.controller('tabsCtrl', function($scope, $ionicConfig, $state) { 

$scope.goTabForums = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.forums'); 
} 
$scope.goTabGroups = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.groups'); 
} 
$scope.goTabTopics = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.topics'); 
} 
$scope.goTabNotifications = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.notifications'); 
} 
$scope.goTabProfile = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.profile'); 
} 
$scope.goTabMore = function(){ 
    $ionicConfig.views.transition('platform'); 
    $state.go('tabsController.more'); 
}}) 

E infine rotte:

$stateProvider 
.state('tabsController.forums', { 
url: '/forums', 
views: { 
    'menuContent': { 
    templateUrl: 'templates/forums.html', 
    controller: 'forumsCtrl' 
    } 
}}) 
.state('tabsController.topics', { 
url: '/topics', 
views: { 
    'menuContent': { 
    templateUrl: 'templates/topics.html', 
    controller: 'topicsCtrl' 
    } 
}})