Как плавно анимировать сдвиг макета (прыжок контента), когда высота содержания верхнего уровня варьируется между страниц ⇐ CSS

[Anonymous]

Я разрабатываю веб-приложение, где высота наиболее максимальной области контента меняется при навигации между различными страницами или представлениями. Это приводит к резкому сдвигу макета (контент, прыгающий вверх или вниз) для контента, отображаемого ниже. Он имеет естественную визуализированную высоту (например, 82px ). В этой точке есть ленточный компонент . Он имеет естественную визуализированную высоту (например, 56px ). В этой точке нет компонента Recap . Весь контент ниже, чтобы прыгнуть на 26px. Это создает заметный и нежелательный эффект «глюка».

то, что я пробовал/рассмотрел (и почему они не полностью подходят):

• Расчет продукта-recap insive insive 1 и применение к нему в «Код» infort nersing 1 и применение к нему в «Код». Измерьте высоту продукта-recap (82PX) в виде 1, а затем программно принуждает компонент ленты в виде 2, также достигая 82px. Если в будущем изменяется в будущем изменение проекта Product-recap и его естественная высота (например, до 100PX), лента также будет вынуждена расти до 100 пикселей. Это часто выглядит визуально «странным», так как лента имеет меньше контента и по своей сути не нуждается в таком большом вертикальном пространстве. В долгосрочной перспективе становится трудно поддерживать, поскольку визуальное намерение ленты скомпрометировано.

желаемый результат:
Я хочу переход между просмотром 1 (с 82px product-rec-rec . лента ), чтобы привести к контенту под этими компонентами, анимируя плавно вверх/вниз, чтобы приспособить изменение высоты, а не резко прыгать. Цель - визуально беспрепятственный опыт без обрезки или нежелательного «пробела» во время или после перехода.

Подробнее здесь: https://stackoverflow.com/questions/797 ... tent-heigh