Topic: AnimateOut, Change, AnimateIn - How to do it cleanly?
I have a div that I am populating repeatedly with content from Ajax.
So what I want to do is wrap this swapping of content with animation out and then animation in.
<div id="pnlTheContent">Here is initial Content</div>
$("#pnlTheContent").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function (){
$("#pnlTheContent").html(x.responseText);
$("#pnlTheContent").switchClass("fadeOutLeft","fadeInLeft");
// Do other handling (mdb-select, pickadate, etc)
});
$("#pnlTheContent").addClass("animated fadeOutLeft");
The problem with this is that it always fades out left twice.
I've tried a bunch of things to lock down the content - if the animation class exists, etc. But I'm thinking there must be a simpler way to do this with a basic fade out, then fade back in process.
What's the solution?
Add comment
Hi cdenby,
Adding and then removing animation is very tricky in JS. For this moment please use methods which we provide for all our Users:
https://mdbootstrap.com/css/animations/
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No