slide-anim

Light weight, stand alone, jQuery like slideDown / slideUp

demos

• basic
• border-box
• none-block-box
• duration
• duration function
• callback
• end-height(experimental)

Usage

$ 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 );
}

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 or display: 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!' );

} );