slide-anim
Light weight, stand alone, jQuery like slideDown / slideUp
demos
Usage
$ npm install --save slide-animthen
import { slideDown, slideUp, slideStop, isVisible } from 'slide-anim';
var element = document.getElementById( 'panel' );
function onSlideUpButtonClick () {
slideStop( element );
slideUp( element );
}
function onSlideDownButtonClick () {
slideStop( element );
slideDown( element );
}
function onSlideStopButtonClick () {
slideStop( element );
}as a standalone JS lib
Copy slide-anim.js from /dist/slide-anim.js and place it in your project.
<script src="./js/slide-anim.js"></script>var element = document.getElementById( 'panel' );
function onSlideUpButtonClick () {
slideAnim.slideStop( element );
slideAnim.slideUp( element );
}
function onSlideDownButtonClick () {
slideAnim.slideStop( element );
slideAnim.slideDown( element );
}Functions
-
slideUp( element ): Slide up -
slideDown( element ): Slide down -
slideStop( element ): Stop current slide animation. Useful to start another slide animation. -
isVisible( element ): return wheather the element is shown ordisplay: none.
Options
| param | required | |
|---|---|---|
duration |
optional | animation duration in ms. default is 400
|
display |
optional | default CSS display, such as 'flex'. default is 'block'
|
e.g.
slideUp( element, {
duration: 800,
display: 'flex'
} );Callbacks
slideDown and slideUp return a Promise.
e.g
slideUp( element ).then( function() {
console.log( 'done!' );
} );