Vue Stagger

Installation

npm install vue-stagger --save

Usage

• register the component.

  window.Vue = require('vue')
  
  Vue.component('TransitionStagger', require('vue-stagger'))

• now use it like

  <transition-stagger
      :before-enter-styles="{translateY: -30, opacity: 0}"
      :enter-styles="{translateY: 0, opacity: 1}"
      :leave-styles="{translateY: 30, opacity: 0}"
      :delay="150"
      tag="div"
      :options="{}"
      :enter-at-once="false"
      :leave-at-once="true">
  
      // your data
  </transition-stagger>

  | prop | required | type | default | description | |-------------------|--------------------|---------|---------|--------------------------------------------------| | tag | :x: | string | ul | | | delay | :white_check_mark: | number | | in milliseconds | | beforeEnterStyles | :white_check_mark: | object | | props | | enterStyles | :white_check_mark: | object | | props | | leaveStyles | :white_check_mark: | object | | props | | options | :x: | object | {} | extra velocity options | | enterAtOnce | :x: | boolean | false | show all items at once "dont delay the entering" | | leaveAtOnce | :x: | boolean | false | hide all items at once "dont delay the leaving" |