Vue.js directive to stagger CSS transitions

directive.stagger.js

/**
*  import StaggerDirective from '@/utils/directive.stagger';
*  Vue.directive('stagger', StaggerDirective);
*
*  Optional directive value selects elements through CSS selectors  v-stagger="'.stagger-item'"
*  Optional argument defines generic stagger interval  v-stagger:250 (default: 100ms)
*  Optional data-stagger for single item delay
*/

export default {
	bind(el, binding) {
		const { value: selector, arg: ms } = binding
		const items = selector ? [...el.querySelectorAll(selector)] : [...el.children];
		items.forEach((item, index) => {
			const interval = index * (parseInt(ms, 10) || 100);
			const { stagger } = item.dataset;
			item.classList.add('stagger-ini');
			setTimeout(() => {
				item.classList.remove('stagger-ini');
				item.classList.add('stagger-end');
			}, stagger || interval);
		});
	},
};