slide-anim

Light weight, stand alone, jQuery like slideDown / slideUp

demos

• basic
• border-box
• none-block-box
• duration
• 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 either promise or Promise-ish object.

• If Promise is available: returns a promise object.
• If Promise is not available: returns a plain object with then method as a callback function.

Thus, following code works regardless of whether Promise is suppoted or not.

e.g

slideUp( element ).then( function() {

    console.log( 'done!' );

} );