fix(ngdocs): improve the animations used in the docs menu

Author: matsko

docs/src/templates/css/animations.css

@@ -1,7 +1,6 @@
 .reveal-setup {
   -webkit-transition:1s linear all;
   -moz-transition:1s linear all;
-  -ms-transition:1s linear all;
   -o-transition:1s linear all;
   transition:1s linear all;
 
@@ -11,45 +10,55 @@
   opacity:1;
 }
 
+.nav-list li {
+  height:20px;
+  overflow:hidden;
+}
+
 .slide-reveal-setup {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
-  -ms-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
   opacity:0.5;
+
+  position:relative;
+  opacity:0;
+  top:10px;
 }
 .slide-reveal-setup.slide-reveal-start {
+  top:0;
   opacity:1;
 }
 
-.slide-enter-setup {
-  -webkit-transition:0.5s linear all;
-  -moz-transition:0.5s linear all;
-  -ms-transition:0.5s linear all;
-  -o-transition:0.5s linear all;
-  transition:0.5s linear all;
+.expand-enter-setup {
+  -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
 
-  position:relative;
-  left:10px;
   opacity:0;
+  line-height:0;
+  height:0!important;
 }
-.slide-enter-setup.slide-enter-start {
-  left:0;
+.expand-enter-setup.expand-enter-start {
   opacity:1;
+  line-height:20px;
+  height:20px!important;
 }
 
-.slide-leave-setup {
-  -webkit-transition:0.5s linear all;
-  -moz-transition:0.5s linear all;
-  -ms-transition:0.5s linear all;
-  -o-transition:0.5s linear all;
-  transition:0.5s linear all;
+.expand-leave-setup {
+  -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
+  transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
 
   opacity:1;
+  height:20px;
 }
-.slide-leave-setup.slide-leave-start {
+.expand-leave-setup.expand-leave-start {
   opacity:0;
+  height:0;
 }
 
 .example-animate-container {
@@ -67,7 +76,6 @@
 .animator-container.animations-off * {
   -webkit-transition: none;
   -moz-transition: none;
-  -ms-transition: none;
   -o-transition: color 0 ease-in; /* opera is special :) */
   transition: none;
 }

docs/src/templates/css/docs.css

@@ -56,7 +56,12 @@ img.AngularJS-small {
 }
 
 .form-search > ul.nav > li.last {
-  margin-bottom: 1em;
+  padding-bottom: 1em;
+}
+
+.form-search > ul.nav > li.last + li.api-list-item {
+  margin-top:-1em;
+  padding-bottom: 1em;
 }
 
 .form-search .well {

docs/src/templates/index.html

@@ -217,13 +217,13 @@
           <div ng-show="search">Filtered results:</div>
 
           <ul class="nav nav-list" ng-hide="page">
-            <li ng-repeat="page in pages" ng-class="navClass(page)">
+            <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
           </ul>
 
 
-          <ul class="nav nav-list well" ng-repeat="module in modules">
+          <ul class="nav nav-list well" ng-repeat="module in modules track by module.url" class="api-list-item">
             <li class="nav-header module">
               <a class="guide" href="{{URL.module}}">module</a>
               <a class="code" href="{{module.url}}">{{module.name}}</a>
@@ -232,37 +232,37 @@
             <li class="nav-header section" ng-show="module.directives">
               <a href="{{URL.directive}}" class="guide">directive</a>
             </li>
-            <li ng-repeat="page in module.directives" ng-class="navClass(page)" ng-animate="'slide'">
+            <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
 
             <li class="nav-header section" ng-show="module.filters">
               <a href="{{URL.filter}}" class="guide">filter</a>
             </li>
-            <li ng-repeat="page in module.filters" ng-class="navClass(page)" ng-animate="'slide'">
+            <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
 
             <li class="nav-header section" ng-show="module.services">
               <a href="{{URL.service}}" class="guide">service</a>
             </li>
-            <li ng-repeat="service in module.services" ng-animate="'slide'" ng-class="navClass(service.instance, service.provider)">
+            <li ng-repeat="service in module.services track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
               <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
               <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
             </li>
 
             <li class="nav-header section" ng-show="module.types">
               <a href="{{URL.type}}" class="guide">Types</a>
             </li>
-            <li ng-repeat="page in module.types" ng-class="navClass(page)" ng-animate="'slide'">
+            <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
 
             <li class="nav-header section" ng-show="module.globals">
               <a href="{{URL.api}}" class="global guide">global APIs</a>
               &nbsp;
             </li>
-            <li ng-repeat="page in module.globals" ng-class="navClass(page)">
+            <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
               <a href="{{page.url}}" tabindex="2">{{page.id}}</a>
             </li>