Optional animations

src/ui-layout.js

@@ -19,6 +19,8 @@ angular.module('ui.layout', [])
 
     Layout.addLayout(ctrl);
 
+    ctrl.animate = $attrs.animate;
+
     ctrl.containers = [];
     ctrl.movingSplitbar = null;
     ctrl.bounds = $element[0].getBoundingClientRect();
@@ -680,8 +682,10 @@ angular.module('ui.layout', [])
         if(!element.hasClass('stretch')) element.addClass('stretch');
         if(!element.hasClass('ui-splitbar')) element.addClass('ui-splitbar');
 
-        var animationClass = ctrl.isUsingColumnFlow ? 'animate-column' : 'animate-row';
-        element.addClass(animationClass);
+        if (ctrl.animate !== 'false') {
+          var animationClass = ctrl.isUsingColumnFlow ? 'animate-column' : 'animate-row';
+          element.addClass(animationClass);
+        }
 
         scope.splitbar = LayoutContainer.Splitbar();
         scope.splitbar.element = element;
@@ -920,8 +924,10 @@ angular.module('ui.layout', [])
                 if(!element.hasClass('stretch')) element.addClass('stretch');
                 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');
 
-                var animationClass = ctrl.isUsingColumnFlow ? 'animate-column' : 'animate-row';
-                element.addClass(animationClass);
+                if (ctrl.animate !== 'false') {
+                  var animationClass = ctrl.isUsingColumnFlow ? 'animate-column' : 'animate-row';
+                  element.addClass(animationClass);
+                }
 
                 scope.$watch('collapsed', function (val, old) {
                   if (angular.isDefined(old) && val !== old) {

test/uiLayoutContainer.spec.js

@@ -3,17 +3,19 @@
 
 describe('Directive: uiLayoutContainer', function () {
   var scope, element, $compile,
-    template = '' +
-    '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
-    '  <div ui-layout-container collapsed="layout.beforeContainer" size="100px" min-size="50px"  max-size="200px" resizable="false">One</div>' +
-    '  <div ui-layout-container data-collapsed="layout.afterContainer">Two</div>' +
-    '</div>';
+    template = function(params) {
+      return '' +
+      '<div ui-layout="{flow: \'column\'}" ui-layout-loaded ' + (params.animate || '') + '>' +
+      '  <div ui-layout-container collapsed="layout.beforeContainer" size="100px" min-size="50px"  max-size="200px" resizable="false">One</div>' +
+      '  <div ui-layout-container data-collapsed="layout.afterContainer">Two</div>' +
+      '</div>';
+    };
 
   function createDirective(layout) {
     var elm;
 
     scope.layout = layout;
-    elm = angular.element(template);
+    elm = angular.element(template(layout));
     angular.element(document.body).prepend(elm);
     $compile(elm)(scope);
     scope.$digest();
@@ -38,7 +40,7 @@ describe('Directive: uiLayoutContainer', function () {
 
   it('should get initial attribute values', function () {
     // this tests values _after_ the layout has been calculated
-    element = createDirective({ beforeContainer: true, afterContainer: false});
+    element = createDirective({ beforeContainer: true, afterContainer: false });
     var divs = element.find('div'),
       beforeContainer = divs[0],
       afterContainer = divs[2],
@@ -61,4 +63,32 @@ describe('Directive: uiLayoutContainer', function () {
 
   });
 
+  it('should be animated when the attribute is explicitly set', function() {
+    element = createDirective({ beforeContainer: true, afterContainer: false, animate: 'animate="true"'});
+    var divs = element.find('div'),
+      beforeContainer = divs[0],
+      afterContainer = divs[2];
+
+    expect(angular.element(beforeContainer).hasClass('animate-column')).toEqual(true);
+    expect(angular.element(afterContainer).hasClass('animate-column')).toEqual(true);
+  });
+
+  it('should be animated when the attribute is not set', function() {
+    element = createDirective({ beforeContainer: true, afterContainer: false});
+    var divs = element.find('div'),
+      beforeContainer = divs[0],
+      afterContainer = divs[2];
+    expect(angular.element(beforeContainer).hasClass('animate-column')).toEqual(true);
+    expect(angular.element(afterContainer).hasClass('animate-column')).toEqual(true);
+  });
+
+  it('should not be animated when the attribute is set to false', function() {
+    element = createDirective({ beforeContainer: true, afterContainer: false, animate: 'animate="false"'});
+    var divs = element.find('div'),
+      beforeContainer = divs[0],
+      afterContainer = divs[2];
+    expect(angular.element(beforeContainer).hasClass('animate-column')).toEqual(false);
+    expect(angular.element(afterContainer).hasClass('animate-column')).toEqual(false);
+  });
+
 });