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;

Answer 2

<强>更新有了这条线：

第一次是好的 - 20％，但是从80％到20％是安全的.... constants.slideAnimation = constants.slideAnimation * 80/100;

// execute just one time on load or some init func 
 var ONE_PER =  constants.slideAnimation / 100;

这条线不一定是：

const slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];

也不需要是const。将此行移出click事件并将其设为：

 var slides = document.getElementsByClassName('CYHH-carousel-carousel')[0];

  //try and check values with console.log 
  console.log(" value for 1 per :" + ONE_PER)
  console.log(" value for constants.slideAnimation :" + constants.slideAnimation)
  constants.slideAnimation = constants.slideAnimation - (20 * ONE_PER);

降低translate-x值

2 个答案: