Не имеют ли элементы, расположенные в процентах, эффекта перехода? ⇐ CSS

[Anonymous]

Мне буквально потребовалось несколько дней, чтобы понять процентную позицию, приведенную в статье «Масонство». Я до сих пор не уверен, правильно ли я это понял или нет. В статье упоминается, что

Задает позиции элементов в процентных значениях, а не в пиксельных значениях.
percentPosition: true хорошо работает с элементами процентной ширины. , поскольку элементы
не меняют свое положение при изменении размера.

Я четко понял, что элементы, расположенные с процентными значениями, хорошо работают, когда ширина элементов задаются через проценты. Теперь следующая часть, где я изо всех сил пытался понять, что

поскольку элементы не меняют свое положение при изменении размера

Прочитав и поэкспериментировав, я понял, что переход не происходит, когда элементы позиционируются в процентах, тогда как при положении элементов со значениями пикселей переход происходит (не знаю причины)
Я только что написал небольшой код, чтобы продемонстрировать свое понимание. Пожалуйста, дайте мне знать, соответствует ли мое понимание статье и оно правильное или нет.
В основном существует три элемента div: bigdiv(родительский div), rel-div(расположен по процентным значениям) и fix-div(расположен по пикселям). Когда ширина родительского div составляет 600 пикселей или больше, я переместил fix-div в новую позицию, и мы можем увидеть эффект перехода на этом элементе, позиционированном в пикселях. Хотя эффекта перехода нет, независимо от того, какую ширину я установил для родительской ширины при вводе.

Код: Выделить всё

o      = document.querySelector(".bigdiv")
fixDiv = document.querySelector(".fix-div")
inp    = document.querySelector("#inp")
inp.addEventListener('change', e => {
o.style.width = e.target.value + "px"
})
const resizeObserver = new ResizeObserver(() => {
console.log('Width:', o.offsetWidth, 'Height:', o.offsetHeight);
if (o.offsetWidth >= 600) {
fixDiv.style.left = "120px"
} else {
fixDiv.style.left = "20px"
}
});
resizeObserver.observe(o)

Код: Выделить всё

.bigdiv {
height: 200px;
width: 200px;
overflow: auto;
resize: horizontal;
position: relative;
background-color: aqua;
}

.rel-div {
position: absolute;
top: 10%;
left: 20%;
height: 50px;
background-color: red;
width: 50px;
transition: left ease 1s;
}

.fix-div {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
background-color: blue;
width: 50px;
transition: left ease 1s;
}

Код: Выделить всё

Width:

Я просматривал статью о Masonry JS. I процентная позиция

Подробнее здесь: https://stackoverflow.com/questions/793 ... ion-effect