Javascript CSS中是否有最小可能的大小更改？

我编写了一些JavaScript代码来为元素的CSS属性设置动画。我将以下参数传递给函数：amount、interval和duration；属性中的更改量（例如200）可能意味着向元素的宽度添加200个像素，间隔是两个连续更改之间的时间，持续时间是动画的总持续时间

除非我以某种方式传递参数，使每个间隔中的变化变得非常小，就像像素的一小部分一样，否则代码工作正常

我知道该代码在理论上运行良好，因为我在控制台中得到了更改

对这个问题有什么想法吗

干杯

更新：代码：

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, 2000, resizeWidth, '.box');

没有

更新2： 我知道浏览器在像素方面非常精确，比如使用百分比。当然，在渲染之前该值将被舍入，因为显示器不能显示半个像素，但该值仍然是精确计算的。 我不知道在什么小数点进行舍入。

这种情况发生是因为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 ) );

---

你能发布你的代码吗？如果你通过plunkr共享代码会更好。我建议1px是最小值，因为有些监视器不能渲染小于一个像素的图像，而且用裸眼移除parseInt很难看到小于px的任何变化，这应该没什么帮助，还尝试了+我必须在某个点将字符串转换为数字@克里斯蒂安娜

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