diff --git a/src/css/styles.css b/src/css/styles.css index 8f22166..51b0b8c 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -17,20 +17,6 @@ touch-action: none; } -.virchual__list { - position: relative; - width: 100%; - height: 100%; - z-index: 1; - display: flex; - transition-property: transform; - box-sizing: content-box; -} - -.virchual__list { - transform: translate3d(0px, 0, 0); -} - .virchual__slide { background-color: #fff; flex-shrink: 0; @@ -38,9 +24,7 @@ height: 100%; top: 0; position: absolute; - transition-duration: 0.2s; transform: translate3d(0%, 0px, 0px); - transition-property: transform; will-change: transform; } diff --git a/src/slide.ts b/src/slide.ts index 61449ff..ee4b097 100644 --- a/src/slide.ts +++ b/src/slide.ts @@ -35,11 +35,11 @@ export class Slide { } render(): HTMLElement { - const element = createElement('div', { classNames: 'virchual__slide', html: this.html }); + this.ref = createElement('div', { classNames: 'virchual__slide', html: this.html }); - this.setAttributes(element); + this.setAttributes(); - return element; + return this.ref; } mount(prepend = false) { @@ -54,11 +54,15 @@ export class Slide { console.debug('[Mount] Slide', { ref: this.ref, prepend }); - this.ref = this.render(); + this.render(); this.isMounted = true; - this.ref.addEventListener('transitionend', this.transitionEndCallback); + this.ref.addEventListener('transitionend', () => { + this.ref.style.transition = ''; + + this.transitionEndCallback(); + }); const insert = prepend ? prependFn : append; @@ -83,19 +87,24 @@ export class Slide { translate(value: number, { easing, done }: { easing?: boolean; done?: identity } = {}) { this.transitionEndCallback = done || noop; - this.ref.style.transition = `transform ${this.settings['speed']}ms ${easing ? this.settings['easing'] : 'ease'}`; + if (easing) { + this.ref.style.transition = `transform ${this.settings['speed']}ms ${this.settings['easing']}`; + } else { + this.ref.style.transition = ''; + } + this.ref.style.transform = `translate3d(calc(${this.position}% + ${Math.round(value)}px), 0, 0)`; } private update() { this.hasChanged = false; - this.setAttributes(this.ref); + this.setAttributes(); } - private setAttributes(element: HTMLElement) { - addOrRemoveClass(element, 'virchual__slide--active', !this.isActive); + private setAttributes() { + addOrRemoveClass(this.ref, 'virchual__slide--active', !this.isActive); - element.style.transform = `translate3d(${this.position}%, 0, 0)`; + this.translate(0, { easing: true }); } }