1
0
mirror of https://github.com/yacy/yacy_search_server.git synced 2025-07-19 08:44:42 -04:00

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

This commit is contained in:
Ryszard Goń
2017-09-10 17:09:35 +02:00
parent ab0e50b941
commit 634f52fefc
3 changed files with 47 additions and 3 deletions

@ -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');
}
});

@ -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() {

42
htroot/yacysort.css Normal file

@ -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;
}