От автора: на сайте CSS-Tricks мы выучили три вещи, давайте объединим их. Первое – переход на авторазмеры. Второе – современные методики Ajax. Третье – измерение размеров изображений после загрузки. Имея в виду эти три фактора, мы можем получать с помощью Ajax’а некий произвольный контент и вставлять его на страницу с плавной анимацией увеличения его высоты. Сложно-то как!
Конечное демо:
Суть в том, что мы в любом случае будем использовать JS. И так как мы используем Ajax для получения контента, то плавную анимацию также можно написать на JS.
И по традиции «написания скриптов» мы должны:
получить по Ajax контент;
создать ложный элемент с шириной, равной тому месту, куда планируется вставить контент;
вставить контент в этот ложный элемент;
измерить ложный элемент (точно);
вставить все это внутрь реального тега (схлопнутого);
плавно увеличить высоту до измеренного значения;
почистить за собой.
Весь код с построчными комментариями можно посмотреть в демо.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
