Light weight, stand alone, jQuery like slideDown / slideUp
$ npm install --save slide-anim
then
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 );
}
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 );
}
-
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
.
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'
} );
slideDown
and slideUp
return a Promise.
e.g
slideUp( element ).then( function() {
console.log( 'done!' );
} );