Отключаем трансформации CSS до завершения загрузки страницы

При использовании трансформаций CSS для структурных элементов страницы иногда получается, что переходы начинаются еще до завершения загрузки страницы. Такие элементы "выпадают" из шаблона.

Для исправления данного дефекта можно использовать следующий метод.

Добавляем класс "preload" к элементу body:

<body class="preload">

И отключаем для данного класса трансформации:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Некотрые браузеры не воспринимают директиву none. Если таковые присутствуют в вашем списке технического задания на проект, то можно использовать вот этот код:

.preload * {
  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -ms-transition: all 0s linear;
  -o-transition: all 0s linear;
}

Остается только убрать класс после загрузки страницы:

$("window").load(function() {
  $("body").removeClass("preload");
});

Вот такими простыми действиями можно избавиться от рывков элементов при загрузке страницы. Было бы лучше обойтись без JavaScript, но ...

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/transitions-only-after-page-load/
Перевел: Сергей Фастунов
Урок создан: 1 Мая 2012
Просмотров: 25835
Правила перепечатки

5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

    Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^