我写了一些 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: 我知道浏览器对像素非常准确,就像使用百分比一样。当然,由于显示器无法显示半个像素,因此在渲染之前会对该值进行四舍五入,但该值仍然是准确计算的。 我不知道四舍五入发生在小数点后几位。
最佳答案
发生这种情况是因为 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 ) );
关于javascript - CSS 中是否有最小可能的尺寸变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54398633/