Remember jQuery? Yeah, it was great. But it was also horrible in its own ways but only when compared to the more powerful tools that we have now as of 2021. I still (almost) use it here on my site. Atually, I use "fork" of jQuery called Cash which calls itself: "An absurdly small jQuery alternative for modern browsers."
Cash is written in TypeScript, which gives me peace of mind, and as a JS bundle, it's only 19KB minified (5.3KB Brotli compressed) whereas jQuery is 87KB minified (27KB Brotli compressed).
But something that jQuery has, that Cash doesn't, is animations. E.g. $('myselector').fadeIn(). If you need to do this with Cash you can use the following pure JavaScript solution:
// Example implementation
const msg = $('<div class="message">')
.text(`Random message: ${Math.random()}`)
.css("opacity", 0)
.css("transition", "opacity 600ms")
.prependTo($("#root"));
setTimeout(() => msg.css("opacity", 1), 0);
setTimeout(() => {
msg.css("transition", "opacity 1000ms").css("opacity", 0);
setTimeout(() => msg.remove(), 1000);
}, 3000);
What this application demonstrates is the creation of a <div> that's immediately injected into the DOM but slowly fades into view. And 3 seconds later it fades out and is removed. Full demo/sample application here.
Sample application using cash like jQuery's $.fadeIn().
The point of the demo is how you can cause the fade-in effect with just Cash but still relies on CSS for the actual animation.
The trick is to, ultimately, create it first like this:
<div class="message" style="opacity:0; transition: opacity 600ms">
Random message: 0.6517198324628395
</div>
and then, right after it's been added to the DOM, change the style=... to:
-<div class="message" style="opacity:0; transition: opacity 600ms">
+<div class="message" style="opacity:1; transition: opacity 600ms">
What's neat about this is that you use the transition shortcut so it's done entirely with CSS instead of a requestAnimationFrame and/or while-loop like jQuery's effects.js does it.
Note! This is not a polyfill since jQuery's fadeIn() (etc.) can do a lot more such as callbacks. The example might not be great but I hope this little solution becomes useful for someone else who needs this.
Comments