Страницы

Поиск по вопросам

понедельник, 3 декабря 2018 г.

Vue.js 2. Как можно сделать плавную анимацию используя v-for. (no JQ)

Есть страница с новостями, которая постоянно спустя 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); }

{{item.text}}

Комментариев нет:

Отправить комментарий