Vue

by Alex Kyriakidis

HTML

<div id="app">
  <h1 
    v-switching-color:fast.textcenter="colors"
    v-if="show"
  >
    Vue School
  </h1>
  
  <button @click="show = !show">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) {
    const modifiers = binding.modifiers
    if (modifiers.underline) {
      el.style.textDecoration = 'underline'
    }
    if (modifiers.textcenter) {
      el.style.textAlign = 'center'
    }

    const speeds = {
      slow: 2000,
      normal: 1000,
      fast: 500,
      crazy: 100
    }
    const speedName = binding.arg || 'normal'
    const speed = speeds[speedName]

    const colors = binding.value
    let i = 0
    el.__SwitchingColorInterval__ = setInterval(() => {
    	console.log('🎨 coloring')
      el.style.color = colors[i++]
      if (i > colors.length - 1) {
        i = 0
      }
    }, speed)
  },
  unbind (el) {
  	clearInterval(el.__SwitchingColorInterval__)
  }
})

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