A simple JS module to ensure a CSS animation plays continuously through to the end animation frame.
Continue playing loading animation until a:
- Lazy loaded image is loaded
- User has clicked on a notification
- "Load more" ajax request has been completed
- Chain multiple animations to fire sequentially
npm install ensure-animation --saveGiven the following markup:
<figure> <img src="large-image.jpg" class="hero lazyload"> <div class="preloader" data-ensure-target=".hero" data-ensure-until=".lazyloaded" data-ensure-finish-class="fade-in"></div> </figure>Import EnsureAnimation for use in your JS:
import EnsureAnimation from 'ensure-animation' new EnsureAnimation('.preloader')const preloaders = new EnsureAnimation('.preloaders')const preload = new EnsureAnimation('.preloader')[0] preload.finish()preload.restart()const preloaders = new EnsureAnimation('.preloader') preloaders.each((preloader) => preloader.finish())Options can be passed directly to an instance using data attributes on the node itself, or by passing in an object of values.
<figure> <img src="large-image.jpg" class="hero lazyload"> <div data-ensure-target=".hero" data-ensure-until=".lazyloaded" data-ensure-finish-class="fade-in" class="preloader"></div> </figure>And
const preloaders = new EnsureAnimation('.preloader', { // target to watch for class to be applied target : '.hero-image' // targets' class signaling animation should finish until : 'has-been-loaded', // target received this class upon finished animation, finishClass : 'custom-finished-class' })