realtime.vue - apply css3 transitions dynamically with vue.js

vue

<template>
  <div>
    <transition appear v-bind:name="transition" mode="out-in" >
     <div class="card" v-bind:key="users">
              <div class="card-block">
                 <h3><i class="fa fa-users"></i> {{ cardTitle }}</h3> 
              </div>
              <div class="card-block">
                  <h1>{{users}}
                        <i style="font-size:0.5em" class="fa fa-arrow-up" v-if="transition=='green'"></i>
                        <i style="font-size:0.5em" class="fa fa-arrow-down" v-if="transition=='red'"></i>
                  </h1>
                  <h3>users right now</h3>
              </div>
           </div>
        </transition>
  </div>
</template>

<script>
export default {
    created(){
      this.fetchData()
    },
    props:['id','title'],
    data(){
        return { 
            transition:'green',
            users: 0,
            cardTitle:"Real time"
        }
    },
    methods:{
         fetchData(){
             let noUsers = Math.floor((Math.random() * 3000) + 1);
             if (noUsers < this.users){
                 this.transition = 'red'
             }
             else{
                 this.transition = 'green'
             }
             this.users = noUsers
             setTimeout(this.fetchData,3000)
        }
    } 
}
</script>

<style scoped>
    
	 .green-enter, .green-leave-to  {
       background-color:#fff;
      }
 
     .green-enter-active{
         -webkit-animation:a 3s;
         animation:a 3s
       }
	   
	 .red-enter, .red-leave-to {
       background-color:#fff;
      }
	  
	  .red-enter-active{
         -webkit-animation:a 3s;
         animation:b 3s
       }
		
	  
   	@-webkit-keyframes a
      {
          10%
          {
              background-color:#ebffeb;
              border-color:rgba(0,128,0,.5);
              color:green
              }
      }

     @keyframes a
      {
          10%
          {
              background-color:#ebffeb;
              border-color:rgba(0,128,0,.5);
              color:green
        }
      }
          
    @-webkit-keyframes b
	{
	    10%
		   {
		     background-color:#ffebeb;
			 border-color:rgba(255,0,0,.5);
			 color:red
		   }
	}
	
    @keyframes b
	{
	      10%
		     {
			    background-color:#ffebeb;
				border-color:rgba(255,0,0,.5);
				color:red
			 }
   }
</style>

Applying a CSS3 Animated Transition using Vue.js

This little vue component acts like the google analytics realtime user updating widget.
Every time users increase it fires the green animated transition and the arrow points up.
Every time users decrease it fires the red animated transition and the arrow points down

An example can be found here: https://shaydoc.github.io/VueStarter