I have a grails gsp page that has animation (slide) after log in is successful. everything is working good except it keeps firing when I paginate or sort the list table. So it slides every time I click next in the pagination.
<div class="paginationlayer">
<span class="gadgetNumber">
<g:paginate next="Next" prev="Back"
maxsteps="0" action="list"
total="${ total }" /></span>
</div>
my page used to have this code:
$(document).ready(function() {
$('#console').animate({
top: "35px"
}, 300);
});
but after realizing it enters it every click of next/prev page or sorting, I removed it and made it as css instead for page's body. (pls don't mind the values below being diff from my code above, those are just tests)
.preload * {
-webkit-animation: on-state 5s;
}
.loaded * {
-webkit-animation: off-state 5s;
}
@-webkit-keyframes on-state {
0% { height: 20px; }
100% { height: 100px; }
}
@-webkit-keyframes off-state {
0% { height: 100px; }
100% { height: 20px; }
}
I tried a lot of suggestions here like this, this, this (but mine is opposite) and other answers I found hoping I'd be able to solve my issue.
changing the 'body' className did not solve it, the className is changed right in window.loaded function that it no longer shows the animation (it just blinks). I tried putting the class name change func inside the pagination click event but did not solve it. 3rd did not solve it either. I tried adding css class, removing class, renaming classname, nope.
Pls. note my animation works great if paginate or table sort is not clicked so that is not the problem. Pls suggest what workaround can I make to stop it from firing on such events.
thanks