Есть ли минимально возможное изменение размера в CSS?

Question

Я написал код JavaScript для анимации CSS свойств элементов.Я передаю следующие аргументы функции: количество , интервал и продолжительность ;величина - это изменение свойства (например, 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, 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 ) );