Эффектное добавление нового содержания на странице
Допустим, что новый модуль с информацией нужно вывести на
странице. Простое добавление модуля в DOM приведет к его немедленному
появлению. В некоторых случаях такой "выход" приемлем, но можно
сделать процесс эффектнее. Наверняка, когда вы добавляете на страницу блок
новой информации, то хотите, чтобы люди обратили внимание на него. Анимация
поможет вам. Технически можно замедлить процесс появления блока, но визуальный
эффект ярким пятном выделит новинку.
СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК
Уже имеющееся содержание
Допустим, что у вас есть страница со следующей структурой:
01 <section
class="main" id="main">
02 <div class="module">
03 ...
04 </div>
05 <div class="module">
06 ...
07 </div>
08 </section>
09
10 <aside
class="sidebar" id="sidebar">
11 <div class="module">
12 ...
13 </div>
14 <div class="module">
15
...
16
</div>
17 </aside>
Добавляем новый блок
В стиле jQuery:
1 $("<div />", {
2
class: "module",
3
html: newContent // из Ajax запроса или другого источника
4 }).prependTo("#sidebar");
Опция 1: задаем новому блоку класс
Если есть возможность, то лучшим методом будет добавление
класса к новому блоку информации, чтобы можно было его указывать специально. В
нашем примере определяем класс newly-added.
1 $("<div />", {
2
class: "module newly-added",
3
html: newContent // из Ajax запроса или другого источника
4 }).prependTo("#sidebar");
CSS код эффекта
Новый класс имеет анимацию эффекта. Она запускается сразу
после добавления блока в DOM.
01 .newly-added {
02 animation: flyin 1.2s ease forwards;
03 opacity: 0;
04 transform: scale(2);
05 filter: blur(4px);
06 }
07
08 @keyframes flyin {
09 to {
10 filter: blur(0);
11
transform: scale(1);
12
opacity: 1;
13
}
14 }
Примечание: в примере опущены префиксы. Все
директивы animation, transform, filter,
и @keyframes должны иметь префиксы браузеров. можно
использовать Prefix Free, для автоматического добавления префиксов.
Опция 2: указываем все новые блоки без класса
Вероятно, что у вас не будет контроля над классами для
нового содержания. В таком случае, можно указать на все содержание страницы и
задать для него класс без эффекта появления.
1 $(function() {
2
$(".module").addClass("old-school");
3 });
А затем можно указать новые блоки с помощью
селектора :not.
1 .module:not(.old-school) {
2
/* анимации */
3 }
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/fly-in-newly-added-content-to-a-page/
Перевел: Сергей Фастунов
| 
