Vue

by Alex Kyriakidis

HTML

<div id="app">
  <h1 
    v-if="!hidden"
    v-switching-color:fast.underline.border.textCenter="colors" 
  >
    Vue School
  </h1>
  
  <button @click="hidden = !hidden">toggle</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h1 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.directive('switching-color', {
	bind (el, binding) {
		// apply decorations passed using modifiers
    const modifiers = binding.modifiers
    if (modifiers.underline) {
    	el.style.textDecoration = 'underline'
    }
    if (modifiers.border) {
    	el.style.border = '1px solid'
    }
    if (modifiers.textcenter) {
    	el.style.textAlign = 'center'
    }
		// define speed for color switch
		const speeds = {
      slow: 1000,
      normal: 800,
      fast: 500,
    	crazy: 100
    }
    const speedName = binding.arg || 'normal'
    const speed = speeds[speedName] 
    // apply color switch
  	const colors = binding.value
    const limit = colors.length - 1
    let i = 0
    el.interval = setInterval(() => {
    	console.log('coloring')
    	el.style.color = colors[i++]
      if (i > limit) {
      	i = 0
      }
    }, speed)    
  },
  unbind (el) {
  	console.log('pokemon', el.interval)
  	clearInterval(el.interval)
  }
})

new Vue({
  el: "#app",
  data: {
    hidden: false,
    colors: ['pink', 'blue', 'purple', 'gold']
  }
})