Кроссдокументные View Transitions могут вести себя не так гладко, как ожидаешь. В разборе — частые проблемы при анимациях между страницами: почему старый способ включения больше не стоит использовать, откуда берётся странный таймаут на 4 секунды и из-за чего переходы начинают дёргаться.

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

#ViewTransitions #CSS #Frontend

CSS стал заметно практичнее: часть свежих возможностей уже можно спокойно использовать в рабочих проектах.

Что особенно полезно:
— anchor positioning — помогает привязывать элементы друг к другу без лишних манипуляций с DOM
— контейнерные запросы по имени — удобнее управлять адаптивностью компонентов
— shape() и shape-outside — для нативной работы с формами, обтеканием и типографикой
— новые view-transition классы и типы — пригодятся для более аккуратных SPA-анимаций
— единицы rcap, rch, rex, ric — дают более точный контроль над текстом

Итог простой: современный CSS уже закрывает больше задач без костылей и лишнего JS.

#CSS #Frontend #SPA

Плавная In-N-Out анимация можно сделать почти без лишнего JS — за счёт sibling-index() в CSS.

Суть простая: когда в списке появляется или исчезает элемент, индексы соседей пересчитываются автоматически. Из-за этого обновляются значения translate, а если у контейнера уже задан transition, перестройка DOM выглядит как аккуратная анимация, а не резкий скачок.

Подход особенно хорош для аватаров, карточек, списков и сеток, где элементы часто меняют порядок. Минимум логики, а интерфейс сразу ощущается живее.

Нашёл канал с реально полезными находками для покупок — скидки, промокоды и удачные товары дня. Загляни, если любишь брать выгодно.

#CSS #DOM #анимация