decrease translate-x value

Question

我正在構建一個輪播，並且每當用戶點擊下一個按鈕時，轉換值需要更新-20％。

首先點擊旋轉木馬移動-20％，然而，每次點擊後，數值減少不到20％ - 數值爲16％，並繼續減少到20以下 - 不確定爲什麼？我需要每次點擊只減少20％的價值。

這是我更新的解決方案CODE：

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％，但secund方式，有20％從80％.... 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。將此線移出單擊事件並使其如下所示：

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);