slide-anim

Light weight, stand alone, jQuery like slideExpand / slideCollapse

demos

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

Usage

$ npm install --save slide-anim

then

import { slideExpand, slideCollapse, slideStop, isVisible } from 'slide-anim';

var element = document.getElementById( 'panel' );

function onslideCollapseButtonClick () {
	slideStop( element );
	slideCollapse( element );
}

function onslideExpandButtonClick () {
	slideStop( element );
	slideExpand( 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 onslideCollapseButtonClick () {
	slideAnim.slideStop( element );
	slideAnim.slideCollapse( element );
}

function onslideExpandButtonClick () {
	slideAnim.slideStop( element );
	slideAnim.slideExpand( element );
}

Functions

• slideCollapse( element ) : Slide up
• slideExpand( 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.

slideCollapse( element, {
	duration: 800,
	display: 'flex'
} );

Callbacks

slideExpand and slideCollapse return a Promise.

e.g

slideCollapse( element ).then( function() {

	console.log( 'done!' );

} );