javascript - 减少 translate-x 值

Question

我正在构建一个旋转木马，每当用户点击下一个按钮时，转换值需要更新 -20%。

第一次点击时，旋转木马移动了 -20%，这很好，但是每次点击后，该值减少不到 20% - 值为 16% 并继续减少到 20 以下 - 不确定为什么？我需要该值每次点击仅减少 20%。

这是我更新的解决方案代码:

const handleCarouselNext = function* (payload) {
  const currentIndex = payload.currentIndex;
  const slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];
  slides.style.transform = 'translateX(-' + (100 - constants.slideAnimation) + '%)';
  constants.slideAnimation = constants.slideAnimation - 20;
  yield put({ type: actions.CAROUSEL_NEXT_DONE, payload: inc(currentIndex) });
};

Answer 1

16% = 20% *0.8

换句话说，您在每次点击后应用“0.8 倍”而不是仅一次(因为您希望将其保持在恒定的 20%。)

所以只需删除它就可以解决问题:constants.slideAnimation = constants.slideAnimation * 80/100;