Skip to content

Instantly share code, notes, and snippets.

@shaydoc
Created July 3, 2017 09:19
Show Gist options
  • Save shaydoc/76007ed6c8c8844332c8865356b1c68a to your computer and use it in GitHub Desktop.
Save shaydoc/76007ed6c8c8844332c8865356b1c68a to your computer and use it in GitHub Desktop.
realtime.vue - apply css3 transitions dynamically with vue.js
<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>
@shaydoc
Copy link
Author

shaydoc commented Jul 3, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment