Skip to content

Instantly share code, notes, and snippets.

@shaydoc

shaydoc/vue

Created July 3, 2017 09:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shaydoc/76007ed6c8c8844332c8865356b1c68a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shaydoc/76007ed6c8c8844332c8865356b1c68a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shaydoc created this gist Jul 3, 2017.
    109 changes: 109 additions & 0 deletions vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    <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>