Анимирование Ajax контента до его естественной высоты

Анимирование Ajax контента до его естественной высоты

От автора: на сайте CSS-Tricks мы выучили три вещи, давайте объединим их. Первое – переход на авторазмеры. Второе – современные методики Ajax. Третье – измерение размеров изображений после загрузки. Имея в виду эти три фактора, мы можем получать с помощью Ajax’а некий произвольный контент и вставлять его на страницу с плавной анимацией увеличения его высоты. Сложно-то как!

Конечное демо:

Суть в том, что мы в любом случае будем использовать JS. И так как мы используем Ajax для получения контента, то плавную анимацию также можно написать на JS.

И по традиции «написания скриптов» мы должны:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

получить по Ajax контент;

создать ложный элемент с шириной, равной тому месту, куда планируется вставить контент;

вставить контент в этот ложный элемент;

измерить ложный элемент (точно);

вставить все это внутрь реального тега (схлопнутого);

плавно увеличить высоту до измеренного значения;

почистить за собой.

Весь код с построчными комментариями можно посмотреть в демо.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий