VanillaJS implementation of the JQuery fade methods.
npm install vanilla-fade !David !David     
Simple Vanilla JS implementation of the fadeIn(), fadeOut(), fadeTo() and fadeToggle() methods. This little package once loaded will add the mentioned methods to the Element prototype. All of the above methods accept the same paramaters: [duration, easing, complete]. Furthermore the prefers-reduce-motion is natively supported. You can read more about it here.
* Installation
* Usage
* prefers-reduce-motion
* Broser support
* Demo
---
Find this usefull? ☕ Buy me a coffee!
---
This package can be downloaded from the NPM registry npm install vanilla-fade --save. Or included in via a standard script tag from this url. Once imported it will automatically initialize.
``javascript
// IIFE
// CJS
require('vanilla-fade/cjs'); // all the library
require('vanilla-fade/cjs/fadeIn'); // single animation
require('vanilla-fade/cjs/fadeOut'); // single animation
require('vanilla-fade/cjs/fadeToggle'); // single animation
require('vanilla-fade/cjs/fadeTo'); // single animation
// ESM
import 'vanilla-fade/esm'; // all the library
import 'vanilla-fade/esm/fadeIn'; // single animation
import 'vanilla-fade/esm/fadeOut'; // single animation
import 'vanilla-fade/esm/fadeToggle'; // single animation
import 'vanilla-fade/esm/fadeTo'; // single animation
`
After import the package the Element.prototype.fadeIn(), Element.prototype.fadeOut(), Element.prototype.fadeTo() and Element.prototype.fadeToggle() will be available to use. The methods accepts the following paramenters:
`javascript`
Element.fadeIn(duration = 250, easing = 'linear', complete = null)
Element.fadeOut(duration = 250, easing = 'linear', complete = null)
Element.fadeTo(duration = 250, opacity = NaN, easing = 'linear', complete = null)
Element.fadeToggle(duration = 250, easing = 'linear', complete = null)
* duration can be a number or a string representing and integer of milliseconds.
* opacity final opacity value. _Required only in fadeTo_
* easing should be one of the following string: _[linear, quadratic, swing, circ, bounce]_.
* complete is a callback that will be executed after the animation completes.
The Element display property won't change after fading out. No assumption on the original display value or opacity value are made. Once triggered the opacity will go from 0 -> 1 and viceversa. So if the element original opacity was .5 this value won't be considered when toggling the fading effect.
Babel will automatically transpile according to the following browserslist:
`jsonBrowsers that we support
defaults
``