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'
autoClear	optional	whether to clear the element’s display style attributes after animation. default is false

e.g.

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

Callbacks

slideExpand and slideCollapse return a Promise.

e.g

slideCollapse( element ).then( function() {

	console.log( 'done!' );

} );