Untitled

methods: {
        animateList: function (offset) {
            Animator.animate(this.$refs.refMenuContainer, { y: offset }, this.endAnimation);
        },
        startAnimation: function () {
            store.commit('setTransitionEvent', 'APP_SIDE_MENU_ANIMATING_START');
        },
        endAnimation: function () {
            store.commit('setTransitionEvent', 'APP_SIDE_MENU_ANIMATING_END');
        },
        updateAnimatePosition(offset) {
            this.startAnimation();
            this.animateList(offset);
        },
    },
    watch: {
        items: function (newVal) {
            const container = this.$refs.refMenuContainer as Vue;
            Animator.reset($(container));
            this.counter = 0;
        },
        focusedIndex: function (newVal, oldVal) {
            const containerWrap = this.$refs.refMenuContainerWrap;
            const container = this.$refs.refMenuContainer;

            if (!containerWrap || !container) {
                return;
            }

            const containerWrapHeight = this.$refs.refMenuContainerWrap.clientHeight;
            const containerHeight = this.$refs.refMenuContainer.clientHeight;

            if (containerWrapHeight >= containerHeight) {
                return;
            }

            this.menuItemHeight = container.children.length
                ? container.children[0].offsetHeight
                : 0;

            const itemsLength = this.items.length - 1;
            const listDiff = containerHeight - containerWrapHeight;
            const itemsThatAreNotVisible = Math.ceil(listDiff / this.menuItemHeight);
            const centerListItem = Math.ceil(containerWrapHeight / this.menuItemHeight / 2);

            const isMovingDown = newVal >= oldVal && newVal >= centerListItem;
            const isMovingUp = oldVal >= newVal && oldVal <= itemsLength - centerListItem + 1;

            if (isMovingDown && this.counter < itemsThatAreNotVisible) {
                this.updateAnimatePosition(`-=${this.menuItemHeight}`);
                this.counter++;
            } else if (isMovingUp && this.counter > 0) {
                this.updateAnimatePosition(`+=${this.menuItemHeight}`);
                this.counter--;
            }
        },
    },