I have developed a Vue application that utilizes socket.io to display real-time information. However, I am looking to incorporate some visually appealing animations into the application using Vue.
Below is a snippet of code that showcases this Vue application. Every 2 seconds, new data is pushed and displayed in the HTML through Vue List Rendering.
In this demonstration, the current Date() is added to the list every 2 seconds. Additionally, there is a method called maintainList that ensures only the 5 latest entries are visible on the screen.
The desired animation
I aim to implement an animation where the "oldest" item (top one) smoothly slides out from the top, causing all items below it to move up by one position, while a new item slides in from the bottom. Ideally, all items should slide up, with those outside the boundaries of #app disappearing from view.
var example1 = new Vue({
el: '#app',
data: {
items: []
},
mounted() {
setInterval(this.add, 2000);
setInterval(this.maintainList, 2000);
},
methods: {
add(){
this.items.push({
'message': new Date()
});
},
maintainList(){
if(Object.keys(this.items).length >= 6){
this.items.shift();
}
}
}
});
example1.add();.box{
padding: 15px;
border: 1px solid black;
margin-bottom: 15px;
animation: fadein 1s;
}
@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355b5c4c693b274727382e">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<div v-for="item in items" class="box">
{{ item.message }}
</div>
</div>