chore(ngdocs): improve the side search animation effects

Author: matsko

docs/src/templates/css/animations.css

@@ -38,18 +38,21 @@
 }
 
 .expand.ng-enter,
+.expand.ng-move,
 .expand.ng-leave {
   -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;
 }
+.expand.ng-move,
 .expand.ng-enter {
   opacity:0;
   line-height:0;
   height:0!important;
 }
-.expand.ng-enter.expand.ng-enter-active {
+.expand.ng-move.ng-move-active,
+.expand.ng-enter.ng-enter-active {
   opacity:1;
   line-height:20px;
   height:20px!important;
@@ -59,12 +62,17 @@
   opacity:1;
   height:20px;
 }
-.expand.ng-leave.expand.ng-leave-active {
+.expand.ng-leave.ng-leave-active {
   opacity:0;
   height:0;
 }
 
+.fade-in.ng-enter,
+.fade-in.ng-move,
+.fade-in.ng-hide-add,
+.fade-in.ng-hide-remove,
 .foldout.ng-enter,
+.foldout.ng-move,
 .foldout.ng-hide-add,
 .foldout.ng-hide-remove {
   -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
@@ -73,20 +81,24 @@
   transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
 }
 
+.fade-in.ng-enter,
+.fade-in.ng-move,
+.fade-in.ng-hide-remove,
+.fade-in.ng-hide-add.ng-hide-active,
 .foldout.ng-hide-remove,
-.foldout.ng-enter {
+.foldout.ng-hide-add.ng-hide-active,
+.foldout.ng-enter,
+.foldout.ng-move {
   opacity:0;
 }
 
+.fade-in.ng-enter.ng-enter-active,
+.fade-in.ng-move.ng-move-active,
+.fade-in.ng-hide-remove.ng-hide-remove-active,
+.fade-in.ng-hide-add,
+.foldout.ng-move.ng-move-active,
 .foldout.ng-hide-remove.ng-hide-remove-active,
+.foldout.ng-hide-add,
 .foldout.ng-enter.ng-enter-active {
   opacity:1;
 }
-
-.foldout.ng-hide-add {
-  opacity:1;
-}
-
-.foldout.ng-hide-add.ng-hide-active {
-  opacity:0;
-}

docs/src/templates/index.html

@@ -272,22 +272,22 @@ <h4>{{ key }}</h4>
             <div ng-show="search">Filtered results:</div>
 
             <ul class="nav nav-list" ng-hide="page">
-              <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item">
+              <li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
             </ul>
 
-            <ul class="nav nav-list well api-list-item" ng-repeat="namespace in namespaces track by namespace.url">
+            <ul class="nav nav-list well api-list-item fade-in" ng-repeat="namespace in namespaces track by namespace.url">
               <li class="nav-header module">
                 <a class="code" href="{{namespace.url}}">{{namespace.name}}</a>
               </li>
 
-              <li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+              <li ng-repeat="page in namespace.errors track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
               </li>
             </ul>
 
-            <ul class="nav nav-list well api-list-item" ng-repeat="module in modules track by module.url">
+            <ul class="nav nav-list well api-list-item fade-in" ng-repeat="module in modules track by module.url">
               <li class="nav-header module">
                 <a class="guide" href="{{URL.module}}">module</a>
                 <a class="code" href="{{module.url}}">{{module.name}}</a>
@@ -326,7 +326,7 @@ <h4>{{ key }}</h4>
                 <a href="{{URL.api}}" class="global guide">global APIs</a>
                 &nbsp;
               </li>
-              <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item">
+              <li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="expand api-list-item">
                 <a href="{{page.url}}" tabindex="2">{{page.id}}</a>
               </li>