Soy nuevo en Vue JS y estoy creando un visor de miniaturas en el que obtendré una lista de imágenes y videos como una matriz de objetos. Al principio, mostraré solo 5 elementos y cuando el usuario haga clic en el botón Superior / Inferior, quiero deslizar las miniaturas verticalmente.

He creado una codepen haciendo referencia a algunos enlaces en StackOverflow.

Estoy usando Vue Transitions y mis datos parecen ser reactivos, pero de alguna manera no puedo ver la transición suave (deslizándome hacia arriba / abajo en 100 px) cuando hago clic en los botones Superior e Inferior.

Código HTML

<div id="app" class="container-fluid">
    <div class="row row-eq-height">
        <div class="thumbnail-container">
            <button class="up" @click="moveTop" :disabled="currentTopIndex === 0">Top</button>
            <div :class="'slider' + (isSlidingToPrevious ? ' sliding-to-previous' : '')">
                <transition-group name='list' tag="ul">
                    <li v-for="(item,index) in currentCarouselData" v-bind:key="index" class="list-item"><img :src="item.itemImage" :alt="item.itemImageAlt" /></li>
                </transition-group>
            </div>
            <button @click="moveBottom" class="down" :disabled="currentBottomIndex === totalCount">Down</button>
        </div>
    </div>
    <pre>
    totalCount {{totalCount}}
    currentTopIndex {{currentTopIndex}}
    currentBottomIndex {{currentBottomIndex}}
    itemsToDisplay {{itemsToDisplay}}
    currentCarouselData {{currentCarouselData}}
</pre>
</div>

ódigo @CSS / LESS:

.row-eq-height {
  display: flex;
  ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: auto;
    border: 1px solid black;
  }
  li {
    flex: 1;
    width: 64px;
    height: 64px;
    position: relative;
    margin: 8px 0;
    border: 1px solid red;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.list-leave-active,
.list-enter-active {
  transition: 0.5s;
}
.list-enter {
  transform: translate(0, 100px);
}
.list-leave-to {
  transform: translate(0, -100px);
}
.sliding-to-previous {
  .list-enter {
    transform: translate(0, -100px);
  }
  .list-leave-to {
    transform: translate(0, 100px);
  }
}

Javascript / Código VUE:

new Vue({
    el: "#app",
    data() {
        return {
            totalCarouselData: [{
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test1"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test2"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test3"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test4"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test5"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test6"
                },
                {
                    itemImage: "https://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg",
                    itemImageAlt: "Test7"
                }
            ],
            currentCarouselData: [],
            isSlidingToPrevious: false,
            totalCount: 0,
            currentTopIndex: 0,
            currentBottomIndex: 0,
            itemsToDisplay: 5
        };
    },
    computed: {},
    mounted() {
        //At first show only 5 items
        this.currentCarouselData = this.totalCarouselData.slice(
            this.currentTopIndex,
            this.itemsToDisplay
        );
        //Get Total Count
        this.totalCount = this.totalCarouselData.length;
        //Update current bottom index
        this.currentBottomIndex = this.itemsToDisplay;
    },
    methods: {
        moveTop() {
            this.isSlidingToPrevious = true;
            this.currentTopIndex += 1;
            this.currentBottomIndex -= 1;
            this.addToTopComputedArr(this.currentBottomIndex);
        },
        moveBottom() {
            this.isSlidingToPrevious = false;
            this.currentTopIndex -= 1;
            this.currentBottomIndex += 1;
            this.addToBottomComputedArr(this.currentBottomIndex);
        },
        addToBottomComputedArr(index) {
            //Splice the first item
            this.currentCarouselData.splice(0, 1);
            //Add the next item to the array
            this.currentCarouselData.push(this.totalCarouselData[index - 1]);
        },
        addToTopComputedArr(index) {
            //Splice the last item
            this.currentCarouselData.splice(index - 1, 1);
            //Add item to the beginning of the array
            this.currentCarouselData.unshift(
                this.totalCarouselData[index - this.itemsToDisplay]
            );
        }
    }
});