angular · matsko · Mar 15, 2013 · Mar 20, 2013 · Mar 20, 2013
diff --git a/angularFiles.js b/angularFiles.js
@@ -9,6 +9,8 @@ angularFiles = {
     'src/auto/injector.js',
 
     'src/ng/anchorScroll.js',
+    'src/ng/animation.js',
+    'src/ng/animator.js',
     'src/ng/browser.js',
     'src/ng/cacheFactory.js',
     'src/ng/compile.js',
@@ -71,7 +73,6 @@ angularFiles = {
     'src/ngMock/angular-mocks.js',
     'src/ngMobile/mobile.js',
     'src/ngMobile/directive/ngClick.js',
-
     'src/bootstrap/bootstrap.js'
   ],
 
@@ -103,6 +104,7 @@ angularFiles = {
     'test/ng/*.js',
     'test/ng/directive/*.js',
     'test/ng/filter/*.js',
+    'test/ngAnimate/*.js',
     'test/ngCookies/*.js',
     'test/ngResource/*.js',
     'test/ngSanitize/*.js',

diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
@@ -328,6 +328,18 @@ Doc.prototype = {
       });
       dom.html(param.description);
     });
+    if(this.animations) {
+      dom.h('Animations', this.animations, function(animations){
+        dom.html('<ul>');
+        var animations = animations.split("\n");
+        animations.forEach(function(ani) {
+          dom.html('<li>');
+          dom.text(ani);
+          dom.html('</li>');
+        });
+        dom.html('</ul>');
+      });
+    }
   },
 
   html_usage_returns: function(dom) {
@@ -433,6 +445,45 @@ Doc.prototype = {
             dom.text('</' + element + '>');
           });
         }
+        if(self.animations) {
+          var animations = [], matches = self.animations.split("\n");
+          matches.forEach(function(ani) {
+            var name = ani.match(/^\s*(.+?)\s*-/)[1];
+            animations.push(name);
+          });
+
+          dom.html('with <span id="animations">animations</span>');
+          var comment;
+          if(animations.length == 1) {
+            comment = 'The ' + animations[0] + ' animation is supported';
+          }
+          else {
+            var rhs = animations[animations.length-1];
+            var lhs = '';
+            for(var i=0;i<animations.length-1;i++) {
+              if(i>0) {
+                lhs += ', ';
+              }
+              lhs += animations[i];
+            }
+            comment = 'The ' + lhs + ' and ' + rhs + ' animations are supported';
+          }
+          var element = self.element || 'ANY';
+          dom.code(function() {
+            dom.text('//' + comment + "\n");
+            dom.text('<' + element + ' ');
+            dom.text(dashCase(self.shortName));
+            renderParams('\n     ', '="', '"', true);
+            dom.text(' ng-animate="');
+            animations.forEach(function(ani) {
+              dom.text(ani + ': ' + ani + '-animation; ');
+            });
+            dom.text('">\n   ...\n');
+            dom.text('</' + element + '>');
+          });
+
+          dom.html('<a href="api/ng.$animator#Methods">Click here</a> to learn more about the steps involved in the animation.');
+        }
       }
       self.html_usage_directiveInfo(dom);
       self.html_usage_parameters(dom);

diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css
@@ -3,6 +3,14 @@ img.AngularJS-small {
   height: 25px;
 }
 
+.breadcrumb li > * {
+  float:left;
+  margin:0 2px 0 0;
+}
+
+.breadcrumb {
+  padding-bottom:2px;
+}
 
 .clear-navbar {
   margin-top: 60px;

diff --git a/example/ngAnimate/css3/index.html b/example/ngAnimate/css3/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html> 
+<html ng-app="Animator" ng-controller="AppCtrl">
+  <head>
+    <title>AngularJS Animation Demo</title>
+<script type="text/ng-template" id="tpl1">
+  <div class="slide">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada risus eu magna posuere eu laoreet odio ornare. Proin malesuada gravida magna at lacinia. Donec metus erat, rutrum sit amet faucibus quis, mattis at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean feugiat nibh in quam facilisis a rutrum risus malesuada. Fusce libero libero, scelerisque eget luctus a, blandit vel nisi. Proin elit nisi, adipiscing nec congue et, ornare vel enim. Nam orci dui, volutpat vitae fringilla vitae, scelerisque ut neque. Etiam libero orci, consequat ac porttitor a, feugiat nec orci. Nullam volutpat rhoncus dolor sed pellentesque. Etiam ornare, enim molestie semper imperdiet, urna ligula porta massa, in tempor diam quam ut velit. Ut sit amet nulla sem, pellentesque bibendum elit. Sed lectus libero, iaculis a vestibulum at, laoreet tempor orci. Praesent scelerisque urna et velit eleifend viverra.
+    </p>
+  </div>
+</script>
+<script type="text/ng-template" id="tpl2">
+  <div class="slide">
+    <img src="http://angularjs.org/img/AngularJS-large.png" />
+  </div>
+</script>
+<script type="text/ng-template" id="tpl3">
+  <div class="slide">
+    slide 3
+  </div>
+</script>
+    <style>
+      /*
+      'in':                'ease-in'
+    , 'out':               'ease-out'
+    , 'in-out':            'ease-in-out'
+    , 'snap':              'cubic-bezier(0,1,.5,1)'
+    , 'ease-out':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)'
+    , 'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
+    , 'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+    , 'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
+    , 'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
+    , 'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
+    , 'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
+    , 'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
+    , 'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
+    , 'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
+    , 'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
+    , 'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
+    , 'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
+    , 'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
+    , 'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
+    , 'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
+    , 'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
+    , 'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
+    , 'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
+    , 'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
+    , 'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
+    , 'ease-in-out-sine':  'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
+    , 'ease-in-out-expo':  'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
+    , 'ease-in-out-circ':  'cubic-bezier(0.785, 0.135, 0.150, 0.860)'
+    , 'ease-in-out-back':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
+    */
+      .include {
+        height:200px;
+        border:1px solid red;
+        overflow:hidden;
+        position:relative;
+      }
+      .include > div {
+        height:100%;
+        padding:1em;
+      }
+      .fade-enter-setup {
+        position: absolute;
+        -webkit-transition:all 0.5s;
+        -webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -moz-transition:all 0.5s;
+        -moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -ms-transition:all 0.5s;
+        -ms-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -o-transition:all 0.5s;
+        -o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        transition:all 0.5s;
+        transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        opacity:0;
+        top:100px;
+      }
+      .fade-enter-setup.fade-enter-start {
+        opacity:1;
+        top:0;
+      }
+      .fade-leave-setup {
+        position: absolute;
+        -webkit-transition:all 0.5s;
+        -webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -moz-transition:all 0.5s;
+        -moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -ms-transition:all 0.5s;
+        -ms-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        -o-transition:all 0.5s;
+        -o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        transition:all 0.5s;
+        transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+        top:0;
+        opacity:1;
+      }
+      .fade-leave-setup.fade-leave-start {
+        top:-100px;
+        opacity:0;
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <div ng-include="'nav.html'"></div>
+
+    <main ng-init="section=1">
+      <section ng-init="in1='tpl1'">
+        <header>
+          <h1>
+            CSS3 Animation
+            <span>
+              <strong>enter:</strong>
+              <em>fadeEnter</em>
+            </span>
+            <span>
+              <strong>leave:</strong>
+              <em>fadeLeave</em>
+            </span>
+          </h3>
+        </header>
+        <div>
+          <nav>
+            <a ng-click="in1='tpl1'" href="#">Page 1</a>
+            <a ng-click="in1='tpl2'" href="#">Page 2</a>
+            <a ng-click="in1='tpl3'" href="#">Page 3</a>
+          </nav>
+          <div class="include" ng-include="in1" ng-animate="fade"></div>
+        </div>
+      </section>
+
+      <section ng-init="in2='tpl1'">
+        <header>
+          <h1>
+            Polyfill Animation
+            <span>
+              <strong>enter:</strong>
+              <em>fadeEnterCb</em>
+            </span>
+            <span>
+              <strong>leave:</strong>
+              <em>fadeLeaveCb</em>
+            </span>
+          </h3>
+        </header>
+        <div>
+          <nav>
+            <a ng-click="in2='tpl1'" href="#">Page 1</a>
+            <a ng-click="in2='tpl2'" href="#">Page 2</a>
+            <a ng-click="in2='tpl3'" href="#">Page 3</a>
+          </nav>
+          <div class="include" ng-include="in2" ng-animate="enter: fade-enter-cb; leave: fade-leave-cb;"></div>
+        </div>
+      </section>
+    </main>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="../../../build/angular.js"></script>
+    <script src="./module.js"></script>
+  <body>
+</html>
diff --git a/example/ngAnimate/css3/module.js b/example/ngAnimate/css3/module.js
@@ -0,0 +1,45 @@
+angular.module('Animator', [])
+
+  .controller('AppCtrl', function($scope) {
+    $scope.items = ["Afghanistan"," Albania"," Algeria"," American Samoa"," Andorra"," Angola"," Anguilla"," Antarctica"," Antigua and Barbuda"," Argentina"," Armenia"," Aruba"," Ashmore and Cartier"," Australia"," Austria"," Azerbaijan"," Bahrain"," Baker Island"," Bangladesh"," Barbados"," Bassas da India"," Belarus"," Belgium"," Belize"," Benin"," Bermuda"," Bhutan"," Bolivia"," Bosnia and Herzegovina"," Botswana"," Bouvet Island"," Brazil"," British Indian Ocean Territory"," British Virgin Islands"," Brunei Darussalam"," Bulgaria"," Burkina Faso"," Burma"," Burundi"," Cambodia"," Cameroon"," Canada"," Cape Verde"," Cayman Islands"," Central African Republic"," Chad"," Chile"," China"," Christmas Island"," Clipperton Island"," Cocos (Keeling) Islands"," Colombia"," Comoros"," Congo, Democratic Republic of the"," Congo, Republic of the"," Cook Islands"," Coral Sea Islands"," Costa Rica"," Cote d'Ivoire"," Croatia"," Cuba"," Cyprus"," Czech Republic"," Denmark"," Djibouti"," Dominica"," Dominican Republic"," East Timor"," Ecuador"," Egypt"," El Salvador"," Equatorial Guinea"," Eritrea"," Estonia"," Ethiopia"," Europa Island"," Falkland Islands (Islas Malvinas)"," Faroe Islands"," Fiji"," Finland"," France"," France, Metropolitan"," French Guiana"," French Polynesia"," French Southern and Antarctic Lands"," Gabon"," Gaza Strip"," Georgia"," Germany"," Ghana"," Gibraltar"," Glorioso Islands"," Greece"," Greenland"," Grenada"," Guadeloupe"," Guam"," Guatemala"," Guernsey"," Guinea"," Guinea-Bissau"," Guyana"," Haiti"," Heard Island and McDonald Islands"," Holy See (Vatican City)"," Honduras"," Hong Kong (SAR)"," Howland Island"," Hungary"," Iceland"," India"," Indonesia"," Iran"," Iraq"," Ireland"," Israel"," Italy"," Jamaica"," Jan Mayen"," Japan"," Jarvis Island"," Jersey"," Johnston Atoll"," Jordan"," Juan de Nova Island"," Kazakhstan"," Kenya"," Kingman Reef"," Kiribati"," Korea, North"," Korea, South"," Kuwait"," Kyrgyzstan"," Laos"," Latvia"," Lebanon"," Lesotho"," Liberia"," Libya"," Liechtenstein"," Lithuania"," Luxembourg"," Macao"," Macedonia, The Former Yugoslav Republic of"," Madagascar"," Malawi"," Malaysia"," Maldives"," Mali"," Malta"," Man, Isle of"," Marshall Islands"," Martinique"," Mauritania"," Mauritius"," Mayotte"," Mexico"," Micronesia, Federated States of"," Midway Islands"," Miscellaneous (French)"," Moldova"," Monaco"," Mongolia"," Montenegro"," Montserrat"," Morocco"," Mozambique"," Myanmar"," Namibia"," Nauru"," Navassa Island"," Nepal"," Netherlands"," Netherlands Antilles"," New Caledonia"," New Zealand"," Nicaragua"," Niger"," Nigeria"," Niue"," Norfolk Island"," Northern Mariana Islands"," Norway"," Oman"," Pakistan"," Palau"," Palestinian Territory, Occupied"," Palmyra Atoll"," Panama"," Papua New Guinea"," Paracel Islands"," Paraguay"," Peru"," Philippines"," Pitcairn Islands"," Poland"," Portugal"," Puerto Rico"," Qatar"," Réunion"," Romania"," Russia"," Rwanda"," Saint Helena"," Saint Kitts and Nevis"," Saint Lucia"," Saint Pierre and Miquelon"," Saint Vincent and the Grenadines"," Samoa"," San Marino"," São Tomé and Príncipe"," Saudi Arabia"," Senegal"," Serbia"," Serbia and Montenegro"," Seychelles"," Sierra Leone"," Singapore"," Slovakia"," Slovenia"," Solomon Islands"," Somalia"," South Africa"," South Georgia and the South Sandwich Islands"," Spain"," Spratly Islands"," Sri Lanka"," Sudan"," Suriname"," Svalbard"," Swaziland"," Sweden"," Switzerland"," Syria"," Taiwan"," Tajikistan"," Tanzania"," Thailand"," The Bahamas"," The Gambia"," Togo"," Tokelau"," Tonga"," Trinidad and Tobago"," Tromelin Island"," Tunisia"," Turkey"," Turkmenistan"," Turks and Caicos Islands"," Tuvalu"," Uganda"," Ukraine"," United Arab Emirates"," United Kingdom"," United States"," United States Minor Outlying Islands"," Uruguay"," Uzbekistan"," Vanuatu"," Venezuela"," Vietnam"," Virgin Islands"," Virgin Islands (UK)"," Virgin Islands (US)"," Wake Island"," Wallis and Futuna"," West Bank"," Western Sahara"," Western Samoa"," Yemen"," Yugoslavia"," Zaire"," Zambia"," Zimbabwe"];
+
+  })
+
+  .animation('fade-enter-cb', function() {
+    return {
+      setup : function(element) {
+        element.css({
+          'opacity':0,
+          'top': 100,
+          'position':'absolute'
+        });
+      },
+      start : function(element, done, memo) {
+        element.animate({
+          'opacity':1,
+          'top':0
+        }, done);
+      }
+    }
+  })
+
+  .animation('fade-leave-cb', function() {
+    return {
+      setup : function(element) {
+        var height = element.height();
+        return height;
+        element.css({
+          'opacity':1,
+          'top': 0,
+          'position':'absolute'
+        });
+      },
+      start : function(element, done, memo) {
+        element.animate({
+          'opacity':0,
+          'top':-100,
+          duration: 2000
+        }, done);
+      }
+    };
+  });
diff --git a/example/ngAnimate/css3/nav.html b/example/ngAnimate/css3/nav.html
@@ -0,0 +1,5 @@
+    <nav>
+      <a href="./">ngInclude</a>
+      <a href="./ng-repeat.html">ngRepeat</a>
+      <a href="./ng-show-hide.html">ngShow / ngHide</a>
+    </nav>