Добавим в компонент свойство, указывающее, сколько элементов надо отображать:
data: () => ({
numShow: 0,
...
С его помощью будем получать массив отображаемых элементов:
computed: {
itemsToShow() {
return this.items.slice(0, this.numShow);
},
...
Создадим методы для показа следующего или скрытия предыдущего элемента - для этого достаточно делать +/- 1 количеству отображаемых элементов:
methods: {
showNext() {
this.numShow = Math.min(this.items.length, this.numShow + 1);
},
hidePrev() {
this.numShow = Math.max(0, this.numShow - 1);
},
...
Повесим этим методы в качестве обработчиков событий завершения показа и скрытия элемента:
<transition-group
@after-enter="showNext"
@after-leave="hidePrev"
...
>
<div
v-for="(n, i) in itemsToShow"
:key="n.id"
...
>
...
Запуск процесса анимации - только из крайних положений, когда ничего не отображается или отображается всё:
methods: {
run() {
this.numShow += ({
0: 1,
[this.items.length]: -1,
})[this.numShow] || 0;
},
...
https://jsfiddle.net/6Ljzpeu2/
А вообще,
в документации есть пример на эту тему.
