slide-anim

Light weight, stand alone, jQuery like slideExpand / slideCollapse

!MIT License

demos

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

Usage

``shell
$ npm install --save slide-anim
`

then

`javascript
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 );
}
`

$3

Copy slide-anim.js from /dist/slide-anim.js and place it in your project.

`html

`

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

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

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

$3

- 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.

$3

| param | required | |
| ------------- | -------- | --- |
| duration | optional | animation duration in ms. default is 400 |
| display | optional | default CSS display, such as 'flex'. default is 'block' |

e.g.
`javascript
slideCollapse( element, {
duration: 800,
display: 'flex'
} );
`

$3

slideExpand and slideCollapse return a Promise.

e.g
`javascript
slideCollapse( element ).then( function() {

console.log( 'done!' );

} );
``