slidingjs

Library fol simple sliding in/out some HTML element.

Important

Library write with using ES2015 sintax

Install

For install use npm i slidingjs

Usage

For use it exist two way:

Reactive update

Immediately update data-slide-state attribute for changing state of element. Fot that use function 'init' when initialize project

Vue example

  <template>
    <input type="button" value="Change state" v-on:click="toggleState">
    <div id="expandDiv" v-bind:data-slide-state="state"></div>
  </template>

  <script>
    import slidingjs from 'slidingjs';

    ...
    mounted() {
      slidingjs.init('#expandDiv');
    },
    data() {
      return {
        state: 'open'
      }
    },
    methods: {
      toggleState() {
        this.state = this.state === 'open' ? 'close' : 'open';
      }
    }
    ...
  </script>

Immediately update

Also you can use:

• slideToggle - switch state of element
• slideUp - collapse element
• slideDown - open element

Vue example

  <template>
    <input type="button" value="Change state" v-on:click="toggleState">
    <div id="expandDiv"></div>
  </template>

  <script>
    import slidingjs from 'slidingjs';

    ...
    methods: {
      toggleState() {
        slidingjs.toggleState('#expandDiv');
      }
    }
    ...
  </script>

Input parameters

All functions take two parameters:

• sel - element selector (*)
• timeMs - execution time in milliseconds (default value 500 ms)