Vue

by Alex Kyriakidis

HTML

<div id="app">
  <h1 
    v-if="!hidden"
    v-switching-color:slow="['red', 'blue', 'purple', 'gold']" 
  >
    Vue School
  </h1>
  
  <p type="text" v-purple>Hi there</p>
  <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', function (el, binding) {
		const speeds = {
    	fastest: 100,
      fast: 500,
      normal: 800,
      slow: 1000
    }
    const passedSpeed = binding.arg
    const speed = passedSpeed ? speeds[passedSpeed] : speeds['normal']
  	const colors = binding.value
    const limit = colors.length - 1
    let i = 0
    setInterval(() => {
    	console.log('coloring')
    	el.style.color = colors[i++]
      if (i > limit) {
      	i = 0
      }
    }, 500)    
  }
)

Vue.directive('purple', function (el) {
  	el.style.color = 'purple'
  }
)

new Vue({
  el: "#app",
  data: {
    hidden: false
  }
})