это своего рода теоретический вопрос javascript/браузера. Мы с коллегой пытаемся написать метод jQuery slideUp в vanilla JS. Важная часть тела функции гласит:

// initial height needs to be set
if (!element.style.height) {
    element.style.height = `${element.scrollHeight}px`;
}

element.style.overflowY = 'hidden';

element.style.transition = `height ${duration / 1000}s ease-out`;

element.style.height = '0';

Это не работает, оно скользит вверх без анимации. Это похоже на код в операторе if, который не был выполнен, но он есть в нашем сценарии. Замена последней строки на setTimeout, конечно, работает:

setTimeout(function() {
    element.style.height = '0';
}, 50);

Вопрос в том, почему первый случай не работает? Я верю, что это потому, что значение высоты на самом деле не изменилось, а вместо этого, так сказать, «переписано». Что-то вроде height = '250px' = '0px', почти, по крайней мере, есть какая-то крошечная задержка. То есть браузер не регистрирует задержку изменения высоты? Или значение просто переписывается сразу, так что как бы начальная высота вообще не задавалась? Следовательно, необходимо ли использовать setTimout() или можно этого избежать?

Мой коллега утверждает, что когда он установил функцию тайм-аута на 10 мс, она не сработала. Но я думаю, что это было совпадением, у меня он работал даже с 0ms (как и должно быть, если я правильно понимаю асинхронный вызов). Спасибо за любое объяснение.

ответ не найден