fix(navBar): only add default animation if there is no custom animation

Closes #1671
ionic-team · Jul 7, 2014 · cdba48f · cdba48f
1 parent 22a81fe
commit cdba48f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/js/angular/directive/navBar.js b/js/angular/directive/navBar.js
@@ -21,8 +21,9 @@ IonicModule.constant('$ionicNavBarConfig', {
  * We can add buttons depending on the currently visible view using
  * {@link ionic.directive:ionNavButtons}.
  *
- * Assign an [animation class](/docs/components#animations) to the element to
- * enable animated changing of titles (recommended: 'nav-title-slide-ios7')
+ * Add an [animation class](/docs/components#animations) to the element via the
+ * `animation` attribute to enable animated changing of titles 
+ * (recommended: 'nav-title-slide-ios7').
  *
  * Note that the ion-nav-bar element will only work correctly if your content has an
  * ionView around it.
@@ -32,7 +33,7 @@ IonicModule.constant('$ionicNavBarConfig', {
  * ```html
  * <body ng-app="starter">
  *   <!-- The nav bar that will be updated as we navigate -->
- *   <ion-nav-bar class="bar-positive nav-title-slide-ios7">
+ *   <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
  *   </ion-nav-bar>
  *
  *   <!-- where the initial view template will be rendered -->
@@ -94,7 +95,7 @@ function($ionicViewService, $rootScope, $animate, $compile, $ionicNavBarConfig)
     compile: function(tElement, tAttrs) {
       //We cannot transclude here because it breaks element.data() inheritance on compile
       tElement
-        .addClass('bar bar-header nav-bar ' + $ionicNavBarConfig.transition)
+        .addClass('bar bar-header nav-bar')
         .append(
           '<div class="buttons left-buttons"> ' +
           '</div>' +
@@ -103,6 +104,12 @@ function($ionicViewService, $rootScope, $animate, $compile, $ionicNavBarConfig)
           '</div>'
         );
 
+      if (isDefined(tAttrs.animation)) {
+        tElement.addClass(tAttrs.animation);
+      } else {
+        tElement.addClass($ionicNavBarConfig.transition);
+      }
+
       return { pre: prelink };
       function prelink($scope, $element, $attr, navBarCtrl) {
         navBarCtrl._headerBarView = new ionic.views.HeaderBar({

diff --git a/test/unit/angular/directive/navBar.unit.js b/test/unit/angular/directive/navBar.unit.js
@@ -323,6 +323,12 @@ describe('ionNavBar', function() {
         var el = setup();
         expect(el.hasClass('nav-title-slide-ios7')).toBe(true);
       });
+
+      it('should not add transition if animation attribute is defined', function() {
+        var el = setup('animation="123abc"');
+        expect(el.hasClass('123abc')).toBe(true);
+        expect(el.hasClass('nav-title-slide-ios7')).toBe(false);
+      });
     });
 
     describe('Android', function() {
@@ -346,6 +352,12 @@ describe('ionNavBar', function() {
         // Nav bar titles don't animation by default on Android
         expect(el.hasClass('no-animation')).toBe(true);
       });
+
+      it('should not add transition if animation attribute is defined', function() {
+        var el = setup('animation="123abc"');
+        expect(el.hasClass('123abc')).toBe(true);
+        expect(el.hasClass('no-animation')).toBe(false);
+      });
     });
   });
 });