Light weight, stand alone, jQuery like slideExpand / slideCollapse
npm install slide-animLight weight, stand alone, jQuery like slideExpand / slideCollapse

!MIT License
- basic
- border-box
- none-block-box
- duration
- duration function
- callback
- end-height(experimental)
``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 );
}
`
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 );
}
`
- slideCollapse( element ) : Slide upslideExpand( element )
- : Slide downslideStop( element )
- : Stop current slide animation. Useful to start another slide isVisible( element )
animation.
- : return wheather the element is shown or display: none.
| 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'
} );
slideExpand and slideCollapse return a Promise.
e.g
`javascript
slideCollapse( element ).then( function() {
console.log( 'done!' );
} );
``