Анімацію Ajax контенту до його природної висоти

380

Від автора: на сайті CSS-Tricks ми вивчили три речі, давайте об’єднаємо їх. Перше – перехід на авторазмеры. Друге – сучасні методики Ajax. Третє – вимірювання розмірів зображень після завантаження. Маючи на увазі ці три чинника, ми можемо отримувати з допомогою Ajax’а якийсь довільний контент і вставляти на сторінку з плавною анімацією збільшення його висоти. Складно-то як!

Кінцеве демо:

Суть в тому, що ми в будь-якому випадку будемо використовувати JS. І так як ми використовуємо Ajax для отримання контенту, то плавну анімацію також можна написати на JS.

І за традицією «написання скриптів» ми повинні:

отримати по Ajax контент;

створити помилковий елемент з шириною, рівній того місця, куди планується вставити вміст;

вставити вміст в цей помилковий елемент;

виміряти помилковий елемент (точно);

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

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

почистити за собою.

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