html JS -如果翻译还没有完成,我怎么能防止我不能按下按钮呢?

5jdjgkvh  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(89)

当我点击滑块按钮时,滑块的变形会发生变化。这个动画持续1秒。我怎样才能防止,如果转换还没有完成,我就不能按下按钮?

// Slider Button Navigation
sliderBtnLeft.addEventListener("click", () => {

    // Container Width
    x = slider.clientWidth;

    // Get the Slider TranslateX value
    tempTranslateX = getTranslateX(slider);

    // Check for first Slider Element
    if(tempTranslateX >= 0)
    {
        // Set translate, to show last item
        slider.style.transform = "translateX(-" + (amountElems - 1) * x + "px)";   
    }
    else
    {
        // Set tranlate, to show next (left) item
        tempTranslateX += x;
        slider.style.transform = "translateX(" + tempTranslateX + "px)";
    }
});

// Function to get Translate Value
function getTranslateX(elem) {
    let style = window.getComputedStyle(elem);
    let matrix = new WebKitCSSMatrix(style.transform);
    return matrix.m41;
}
bq3bfh9z

bq3bfh9z1#

您可以禁用该按钮默认情况下,您可以利用transitionend事件启用它,一旦过渡完成。requestAnimationFrame也会工作。

相关问题