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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Chris Coyier

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree