A dependency-free micro library to fade things in and out.
CSS does not support animation or transition on display none, use this instead.
Using npm:
$ npm install --save fadr
The UMD build is also available on unpkg:
<script src="https://unpkg.com/fadr/dist/fadr.min.js"></script>import fadr from 'fadr';
const div = document.querySelector('div');
/**
* To fade in an element to display `flex` at 1000ms with a custom easing function.
*
*/
fadr('in', div, {
duration: 1000,
easing: (t, b, c, d) => (-c * (t /= d) * (t - 2)) + b,
display: 'flex',
complete: () => {
console.log('done');
},
});Type: String
- fade in -
in - fade out -
out
DOM node to fade in or fade out.
Type: Node
Type: Object
Type: number
Default: 400
Type: function
Default : easeOutQuad
Type: string
Default: fade in - block, fade out - none
Type: function
Default: undefined
MIT © Jonathan Chan