Trigger js resorting animations using only CSS classes.

Also added some more descriptive comments.

htroot/js/yacysort.js

@@ -12,20 +12,19 @@ var displayPage = function() {
   $("#resultscontainer").find(".searchresults.earlierpage").each( function(i) {
     // Hide the item
     $(this).removeClass("currentpage");
-    $(this).css('animation', '1s 1 forwards hide');
   });
 
   // For every search item from a current or later page...
   $("#resultscontainer").find(".searchresults:not(.earlierpage)").each( function(i) {
+	var laterPage = (i >= requestedResults);
+	$(this).toggleClass("laterpage", laterPage);
     // If we now have too many results, hide the lowest-ranking ones.
-    if (i >= requestedResults) {
+    if (laterPage) {
       $(this).removeClass("currentpage");
-      $(this).css('animation', '1s 1 forwards hide');
     }
     else {
+      $(this).removeClass("hidden");
       $(this).addClass("currentpage");
-      $(this).css('display', '');
-      $(this).css('animation', '1s 1 forwards show');
     }
   });
 
@@ -272,7 +271,8 @@ var updateSidebar = function() {
 };
 
 var processItem = function(data) {
-  var newItem = $(data).hide();
+  var newItem = $(data);
+  newItem.addClass("hidden");
 
   // If we didn't get a valid response from YaCy, wait 1 second and try again.
   if( ! newItem.data("ranking") ) {

htroot/yacysort.css

@@ -1,5 +1,19 @@
-@keyframes show {
-    0% {
+/* Specific styling for search results resorting with JavaScript (configuration setting search.jsresort=true) */
+
+/* Apply to all search results on the current page, except the last inserted one which doesn't need animation */
+.searchresults.currentpage:not(:last-of-type) {
+	/* Animate when a result becomes part of the currently displayed results page */
+	animation: 1s 1 forwards showSearchResult;
+}
+
+.searchresults.earlierpage, .searchresults.laterpage {
+	/* Animate when a result goes out of the currently displayed results page*/
+	animation: 1s 1 forwards hideSearchResult;
+}
+
+/* Animation sequence used when a search result becomes visible */
+@keyframes showSearchResult {
+    from {
       transform: scale(0);
       max-height: 0;
       opacity: 0;
@@ -10,16 +24,23 @@
       opacity: 1;
     }
     99% {
+       /* Arbitrary large value, supposed to be larger than any result item height, to let the browser perform the transition from a collapsed state 
+       (as the 'display' attribute can not be used in CSS animations) */
       max-height: 500px;
       padding-top: 1em;
     }
+    /* Properties of this last frame are part of the new state (with animation-fill-mode set to 'forwards')*/
     100% {
+      /* Remove any constraint on the max-height now that the animation has been performed */
       max-height: none;
     }
 }
 
-@keyframes hide {
+/* Animation sequence used when a search result becomes hidden */
+@keyframes hideSearchResult {
     0% {
+      /* Arbitrary large value, supposed to be larger than any result item height, to let the browser perform the transition to a collapsed state 
+       (as the 'display' attribute can not be used in CSS animations)*/
       max-height: 500px;
       padding-top: 1em;
     }
@@ -27,6 +48,7 @@
       transform: scale(1);
       opacity: 1;
     }
+    /* Properties of this last frame are part of the new state (with animation-fill-mode set to 'forwards')*/
     100% {
       transform: scale(0);
       max-height: 0;