Javascript re-sorting: replace jQuery show() with css animations

htroot/js/yacysort.js

@@ -12,7 +12,7 @@ var displayPage = function() {
   $("#resultscontainer").find(".searchresults.earlierpage").each( function(i) {
     // Hide the item
     $(this).removeClass("currentpage");
-    $(this).hide(1000);
+    $(this).css('animation', '1s 1 forwards hide');
   });
 
   // For every search item from a current or later page...
@@ -20,11 +20,12 @@ var displayPage = function() {
     // If we now have too many results, hide the lowest-ranking ones.
     if (i >= requestedResults) {
       $(this).removeClass("currentpage");
-      $(this).hide(1000);
+      $(this).css('animation', '1s 1 forwards hide');
     }
     else {
       $(this).addClass("currentpage");
-      $(this).show(1000);
+      $(this).css('display', '');
+      $(this).css('animation', '1s 1 forwards show');
     }
   });
 

htroot/yacysearch.html

@@ -19,6 +19,7 @@
     var theLocalQuery = #[localQuery]#;
   </script>
   <script type="text/javascript" src="js/yacysort.js"></script>
+  <link rel="stylesheet" type="text/css" media="screen" href="yacysort.css" />
   #(/jsResort)#
   <script type="text/javascript">
      var suggestMatcher = function() {

htroot/yacysort.css

@@ -0,0 +1,42 @@
+@keyframes show {
+    0% {
+      transform: scale(0);
+      max-height: 0;
+      opacity: 0;
+      display: hidden;
+      padding-top: 0;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      max-height: 500px;
+      display: block;
+      padding-top: 1em;
+    }
+}
+
+@keyframes hide {
+    0% {
+      max-height: 500px;
+      display: block;
+      padding-top: 1em;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0);
+      max-height: 0;
+      opacity: 0;
+      display: hidden;
+      padding-top: 0;
+    }
+}
+
+.searchresults {
+  overflow: hidden;
+  transform-origin: top left;
+}