Page transition animation fires every other time

ionic-v1
1

I’ve got a tab bar and I’m trying to animate the transition between pages underneath and not underneath the tab bar. Currently this only animates every other time I click on a page. The forward and backward animations work well in pairs, and the next time, just a jump. I’d expect it to work completely or not at all, so I’m a little confused. Browsing the DOM and Scopes in Batarang, I can’t see a difference between when it works and when it doesn’t.

Here’s my main index file

  <body ng-app="myapp" animation="slide-left-right-ios7">

    <header-bar
            id="header"
            title="headerTitle"
            left-buttons="leftButtons"
            right-buttons="rightButtons"
            type="bar-positive"
            align-title="center"
            animation="nav-title-slide-ios7">

    </header-bar>

    <nav-view animation="slide-left-right"></nav-view>
  </body>
`</html>

Here’s my app.js

angular.module('myapp', ['ionic', 'myapp.services', 'myapp.controllers'])


.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // the pet tab has its own child nav-view and history
    .state('tab.things', {
      url: '/things',
      views: {
        'things-tab': {
          templateUrl: 'templates/things.html',
          controller: 'ThingIndexCtrl'
        }
      }
    })
    .state('tab.events', {
      url: '/events',
      views: {
        'events-tab': {
          templateUrl: 'templates/events.html',
          controller: 'EventsCtrl'
        }
      }
    })
    .state('tab.about', {
      url: '/about',
      views: {
        'about-tab': {
          templateUrl: 'templates/about.html'
        }
      }
    })
    // pages not underneath tab bar
    .state('thing', {
      url: '/thing/{thingId:[0-9]{1,8}}',
      templateUrl: 'templates/thing.html',
      controller: 'ThingDetailCtrl'
    })
    .state('add', {
      url: '/add-thing',
      templateUrl: 'templates/add.html',
      controller: 'AddThingCtrl'
    });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/things');

});

And my Controllers

angular.module('myapp.controllers', [])

.controller('ThingIndexCtrl', function($scope, ThingService,$rootScope, $state) {
  $scope.things = ThingService.allThings();
  $rootScope.backButtonLocation = 'tab.things'
  $rootScope.headerTitle = 'Things';
  $rootScope.leftButtons = [
    {
      type: 'button-positive',
      content: '<i class="icon ion-android-add"></i>',
      tap: function(e) {
        $state.go('add');
      }
    }
  ];
})
.controller('ThingDetailCtrl', function($scope, $stateParams, ThingService, $rootScope,$state) {
  $scope.thing = ThingService.getThing($stateParams.thingId);
  $rootScope.headerTitle = $scope.thing.title;
  $rootScope.forceTabBar = true;
  $rootScope.leftButtons = [
    {
      type: 'button-positive',
      content: '<i class="icon ion-arrow-left-c"></i>',
      tap: function(e) {
        $state.go($rootScope.backButtonLocation);
      }
    }
  ];
})
.controller('EventsCtrl', function($scope, ThingService,$rootScope) {
  $scope.events = ThingService.allEvents();
  $scope.things = ThingService.allThings();
  $rootScope.backButtonLocation = 'tab.events'
  $rootScope.headerTitle = 'Events';
  $rootScope.leftButtons = [];
})
.controller('AddThingCtrl', function($scope, ThingService,$rootScope, $state) {
  $scope.events = ThingService.allEvents();
  $scope.things = ThingService.allThings();
  $rootScope.headerTitle = 'Add Thing';
  $rootScope.leftButtons = [
    {
      type: 'button-positive',
      content: '<i class="icon ion-arrow-left-c"></i>',
      tap: function(e) {
        $state.go($rootScope.backButtonLocation);
      }
    }
  ];
});

As you can see, it’s still structured pretty closely to the see app, with some minor deviations so that the specific thing page is not under things, and the back button updates to go to things or events, depending on which page you were last on. Any ideas?

2

@perrygovier, I’m not sure exactly what you are trying to achieve that is custom. What do you mean underneath but not underneath?

3

This is related to Transitions with $location.path(page).

Since the transitions are working as intended, it seemed like it should be a different thread. The odd part is that the transitions are firing every other time, which seems like it may be a bug with how the tab bar switches between pages that are and aren’t its children.

If I move the thing and/or add-thing pages underneath a tab menu, no animations fire during the transition between tab bar siblings.