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	❌	string	ul
  delay	✅	number		in milliseconds
  beforeEnterStyles	✅	object		props
  enterStyles	✅	object		props
  leaveStyles	✅	object		props
  options	❌	object	{}	extra velocity options
  enterAtOnce	❌	boolean	false	show all items at once "dont delay the entering"
  leaveAtOnce	❌	boolean	false	hide all items at once "dont delay the leaving"