Карусель translate3d выпуск - PullRequest
0 голосов
/ 19 марта 2019

У меня есть эта проблема. Я знаю, что это хорошо известная ошибка, но я не смог ее исправить. Итак, у меня есть карусель со следующей структурой: enter image description here

Наличие eventListener на карусели (перетаскивание) создает эффект замедленного скольжения. Но если я преобразую style.left, то задержки не будет.

carousel.ondragstart = this.dragStart;
carousel.ondrag = this.drag;
carousel.ondragend = this.dragEnd;

Это отлично работает:

  dragStart = (e) => {
    this.startX = e.clientX;
  }
  drag = (e) => {
    this.carousel.style.left = `${-this.elementIndex * this.album.clientWidth - (this.startX - e.clientX)}px`;
  }
  dragEnd = (e) => {
    this.carousel.style.left= `${-(++this.elementIndex * this.album.clientWidth)}px`;
  }

Это имеет лаг:

  dragStart = (e) => {
    this.startX = e.clientX;
  }
  drag = (e) => {
    this.carousel.style.transform = `translate3d(${-this.elementIndex * this.album.clientWidth - (this.startX - e.clientX)}px,0,0)`;
  }
  dragEnd = (e) => {
    this.carousel.style.transform = `translate3d(${-(++this.elementIndex * this.album.clientWidth)}px,0,0)`;
  }

Есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...