Есть страница с новостями, которая постоянно спустя 5 сек отправляет запрос на /getNews, ответ присваиваю в items. Далее через v-for происходит рендер блоков. Мне не нравиться, что они рендерятся сразу, я бы хотел какой нибудь плавности.
Код (News.vue):
Ответ
Для анимации списков надо использовать transition-group.
https://vuejs.org/v2/guide/transitions.html#List-Transitions
Основные моменты:
элементы списка должны иметь уникальный ключ (задается через :key);
по умолчанию элементы списка рендерятся в контейнер span, но это можно поменять использую атрибут tag;
И небольшой пример:
new Vue({
el: '#app',
data() {
return {
items: []
}
},
mounted() {
setTimeout(() => {
this.items = [
{id: 1, text: "Lorem ipsum"},
{id: 2, text: "Lorem ipsum"},
{id: 3, text: "Lorem ipsum"},
{id: 4, text: "Lorem ipsum"},
{id: 5, text: "Lorem ipsum"}
]
}, 1000);
}
})
.item {
height: 40px;
width: 70px;
border: 1px solid #ccc;
margin: 5px;
}
.list-enter-active, .list-leave-active {
transition: all 0.9s;
opacity: 1;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateX(50px) rotate(90deg);
}
Комментариев нет:
Отправить комментарий