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

#javascript #vuejs

Есть страница с новостями, которая постоянно спустя 5 сек отправляет запрос на /getNews,
ответ присваиваю в items. Далее через v-for происходит рендер блоков. Мне не нравиться,
что они рендерятся сразу, я бы хотел какой нибудь плавности.  

Код (News.vue):







    

Ответы

Ответ 1

Для анимации списков надо использовать 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}}
    
  



Ответ 2

Вы можете использовать  или  для создания плавных переходов.

Подробности: https://ru.vuejs.org/v2/guide/transitions.html