Untitled
unknown
javascript
a year ago
2.2 kB
4
Indexable
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--; } }, },
Editor is loading...
Leave a Comment