Есть страница с новостями, которая постоянно спустя 5 сек отправляет запрос на /getNews
, ответ присваиваю в items
. Далее через v-for происходит рендер блоков. Мне не нравиться, что они рендерятся сразу, я бы хотел какой нибудь плавности.
Код (News.vue):
<template>
<div>
<router-view></router-view>
<div class="AddNews" data-toggle="modal" data-target="#modal-1">Are you have interested news? Add NEWS</div>
<div class="GeneralBlock">
<div v-for="item in items" class="newsBlock" v-bind:id="item._id">
<div class="newsHeader">
<span class="spanNewsHeader" >{{item.title}}</span>
</div>
<div class="newsBody">
<span class="spanNewsBody" >{{item.description}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data: () => {
return {
items: [],
errors: []
}
},
created: function () {
this.getNews();
setInterval(t => this.getNews(), 5000);
},
methods: {
getNews: function () {
axios.get('/getNews', { params: date}).then(res => {
if(res !== []) {
this.items = res.data.concat(this.items);
}
}).catch(e => this.errors.push(e));
}
}
}
</script>
<style>
html {
background-color:#fffacd;
}
html {
background-color:#fffacd;
transition: 0.3s all;
}
#app {
padding-top: .1%;
transition: 0.3s all;
}
.GeneralBlock {
width: 100%;
height: 100%;
position: absolute;
margin-top: 5%;
transition: 0.3s all;
}
.newsBlock{
position: relative;
width: 50%;
height: 50%;
margin-top: 3%;
margin-left: 50%;
left: -25%;
background-color:#FFFFF0;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
transition: 0.3s all;
overflow: hidden;
}
#addNews {
margin-top: 5%;
}
.AddNews{
position: absolute;
height: 35px;
padding-top: 5px;
margin-left: 50%;
width: 50%;
left: -25%;
font-size: large;
text-align: center;
background-color: #67b168;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
}
#addNewsOpen {
position: absolute;
height: 30px;
font-size: medium;
margin-top: 0.5%;
margin-left: 64%;
}
.newsHeader{
position: inherit;
width: 100%;
height: 20%;
border: solid 0px black;
margin-top: 0%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: 0.3s all;
}
.spanNewsHeader {
position: absolute;
text-align: center;
margin-top: 2%;
width: 100%;
font-size: x-large;
white-space: nowrap;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
cursor: pointer;
}
.spanNewsBody{
word-wrap: break-word;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;
text-justify-trim: normal;
}
.newsBody{
padding: 5px;
font-size: medium;
transition: 0.3s all;
}
</style>