javascript - CSS 中是否有最小可能的尺寸变化？

Question

我写了一些 JavaScript 代码来为元素的 CSS 属性设置动画。我将以下参数传递给函数:amount、interval 和duration； amount 是属性的变化(例如 200 可能意味着向元素的宽度添加 200 像素)，interval 是两次连续变化之间的时间，而 duration 是动画的总持续时间。

代码工作正常，除非我以每个间隔的变化变得非常小(就像像素的一小部分)的方式传递参数。

我知道代码在理论上工作正常，因为我在控制台中得到了更改。

关于这个问题有什么想法吗？

干杯。

更新:代码:

function handleTimer (amount, interval, duration, execute, element) {
    let i = 0;
    let current = 0;
    let stepsCount = countSteps(interval, duration);
    let stepLength = calcStepLength(stepsCount, amount);
    let count = setTimeout(function addOneMore () {
        if ( i < stepsCount -1 ){
            i++;
            current += stepLength;

            execute(stepLength, element);
            if (current < amount) {
                count = setTimeout(addOneMore, interval)
            }
        } else {
            current = amount;
            execute(amount - (stepsCount -1) * stepLength, element);
        }
    }, interval)
}

function countSteps (interval, duration) {
    let remainder = duration % interval;
    let stepsCount;
    if (remainder) {
        stepsCount = Math.floor(duration / interval) + 1;
    } else {
        stepsCount = duration / interval;
    }
    return stepsCount;
}
function calcStepLength(stepsCount, amount) {
    return amount / stepsCount;
}


function resizeWidth (amount, element) {
    let widthSTR = $(element).css('width');
    let width = parseInt( widthSTR.substr( 0 , widthSTR.length - 2 ) );

    $(element).css('width', `${width + amount}px`);

}

所以这样:

handleTimer(218, 5, 200, resizeWidth, '.box');

工作正常，但是:

handleTimer(218, 5, 2000, resizeWidth, '.box');

没有。

更新 2:我知道浏览器对像素非常准确，就像使用百分比一样。当然，由于显示器无法显示半个像素，因此在渲染之前会对该值进行四舍五入，但该值仍然是准确计算的。我不知道四舍五入发生在小数点后几位。

Answer 1

发生这种情况是因为 parseInt 正在四舍五入您的数字。

注意这一行:

let width = parseInt( widthSTR.substr( 0 , widthSTR.length - 2 ) );

如果宽度是一个小数，比如22.5px，它会四舍五入到22。

如果 amount 小于 1，则不会达到 23，当您再次将数字四舍五入时，您将得到 22 再一次，它变成了一个循环。

您有两个解决方案:

• 使用另一个变量来保存宽度值，避免从 CSS 写入和读取它:

  let initialWidth = $(element).css('width');
  let savedWidth = widthSTR.substr(0, initialWidth, initialWidth.length - 2 ) );
  function resizeWidth (amount, element) {
    savedWidth += amount;
    $(element).css('width', `${savedWidth}px`);
  }
  

• 只需使用 parseFloat 代替 parseInt 即可避免将数字四舍五入:

  let width = parseFloat( widthSTR.substr( 0 , widthSTR.length - 2 ) );