Четыре с половиной года назад CSS переходы были впервые введены в WebKit, и три года, как к ним присоединилась анимация по ключевым кадрам CSS. В настоящее время они приближаются к переломному моменту реализации в браузерах — на данный момент поддерживаются в Chrome, Safari и Firefox, а значит, стали доступными для 50-60 процентов веб-пользователей, и скоро появятся в Опере 12 и Internet Explorer 10 . CSS анимации и CSS переходам в последнее время уделяют очень много внимания, поэтому в этой статье   мы увидим, как CSS анимацию можно объединить с обработчиками событий JavaScript, что значительно увеличивает возможности анимации. Это будем делать путем создания простого многоярусного слайд-шоу, которое показывает переходы между набором выбранных изображений.

В конце этого года выйдет Internet Explorer 10, который должен стать большим толчком для освоения CSS анимации.

• Необходимые знания: средний уровень CSS, основы HTML , основы  JavaScript
• Требуется : ​​JQuery, Modernizr, современный веб-браузер
• СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ
• ПОСМОТРЕТЬ ДЕМО

<div class="holder">
<img class="img-1" src="kitten-1.jpg">
<img class="img-2" src="kitten-2.jpg">
</div>

.holder { position: relative; }
.holder img {
bottom: 0;
left: 0;
position: absolute;
}
img.img-1 { z-index: 8; } img.img-2 { z-index: 7; }

Как вы обратили внимание, эта разметка находится не в HTML файле. Для удобства она позже будет добавлена с помощью скрипта. Эти два блока разметки содержат всю информацию, которая нужна, чтобы создать сценарий, но сначала нужно задать им стили.

CSS переходы были введены еще в октябре 2007 года и объявлены на блоге Surfin 'Safari WebKit.

Стили

Для начала, два элемента изображений должны быть позиционированы в той же точке внутри своих родителей. Чтобы img-1 появлялся перед img-2, ему присваивается высший z-index.

.holder { position: relative; }
.holder img {
bottom: 0;
left: 0;
position: absolute;
}
img.img-1 { z-index: 8; } img.img-2 { z-index: 7; }

Для того, чтобы элементы img появлялись слайдами, к  img-2 применяются CSS преобразования, которые позволяют немного уменьшить  его  и переместить  немного выше  img-1. К нему также применяется переход, о котором речь будет идти немного ниже.

img.img-2 {
transform: scale(0.96) translateY(-3.6%);
transition: all 500ms ease-out;
}

Наконец, создаем ключевой кадр анимации, который называем  upndown. С помощью него слайд img-2  будет размещаться за слайдом img-1.

50% { transform: scale(1) translateY(-120%); }
to {
transform: none;
z-index: 9;
}
}

Вы видите, что из отправной точки он будет сдвигаться на 120% вверх и  возвращаться обратно, увеличивая z-index до 9. После того, как мы создали ключевые кадры, называем их .img-2.stage-1. 

Разметка и стили были прописаны, поэтому теперь можно перейти к JavaScript.

Опера 12 включает поддержку CSS анимаций, что предоставит ряд новых возможностей мобильным устройствам.

Сценарии JavaScript

В моем документе используются три файла JavaScript:

Первый, JQuery, объяснять не нужно. Следующий файл пользовательской сборки Modernizr , который обеспечивает поддержку CSS анимации и переходов.

В третьем файле, мы будем создавать ​​собственный сценарий, о котором и пойдет речь.

Modernizr определяет  возможности браузера по CSS анимации и переходам

Первый шаг заключается в инициировании JQuery с  ready() методом и  с помощью Modernizr проверить, может ли браузер поддерживать пример. 

$(document).ready(function(){
if(Modernizr.cssanimations && Modernizr.csstransitions) {
// Run our script
} else {
// Do something else
});

Следующим шагом будет создание нескольких переменных: holder , который является DOM(document object mode) для нашего элемента-контейнера .holder, в то время как controls содержит все разметку для элементов управления, которые были продемонстрированы ранее.  (в разделе «Разметка»):

После переменных нужно определить  функции: swapStage1 , swapStage2 и swapStage3. К каждой из них будет написано ниже. Вместе с глобальными переменными и определенными функциями, определенных, вставляем управление разметкой  controls после контейнера элементов holder. 

holder.after(controls);

Пришло время создать первый слушатель событий, который  будет вызывать функцию swapStage1 при нажатии любого элемент из списка.

$('#trigger').on('click','li:not(.active)',swapStage1);

Вот вся функция swapStage1:

Функция swapStage1 ( электронной ) {
$ ( e.currentTarget ) . AddClass ( «активный» ) братья и сестры. ( ) removeClass. ( «активный» ) ;
VAR img2data = $ ( e.currentTarget ) данных. ( 'IMG' ) ;
holder.find ( "img.img-2» ) . Attr ( "SRC" , img2data + 'JPG. ) AddClass. ( "стадия-1" ) ; }

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

Далее получает значение атрибута от элемента data-img ( по которому щелкают) и изменяет значение атрибута href в .img-2, это позволяет изменить изображение.

Наконец, добавляется класс  stage-1 в .img-2., где в игру вступаю события нашей CSS-анимации.

События CSS-анимации

Когда в .img-2 уже добавлен класс stage-1, запускаются ключевые кадры анимации, которые называются  upndown. Это, как вы помните, позволяет подняться ему вверх, а потом снова опуститься перед элементом .img-1. Когда анимация завершена, запускается событие под названием animationend. В нашем сценарии есть обработчик событий, созданный для перелистывания.

holder.on ( "animationend ' , 'img.img-2.stage-1 " , swapStage2 ) ;

На сегодняшний день только в Firefox доступна реализация без префиксов, поэтому для перелистывания сценарий использует четыре различных значения.

holder.on('animationend MSAnimationend oanimationend webkitAnimationEnd', 'img.img-2.stage-1', swapStage2);

Несмотря на то, функции swapStage2 вызывается, когда анимация upndown завершена. Сразу становится видно, что это очень полезный способ объединить анимации. 

В сценарии swapStage2 классы элементов: .img-1 становятся классами .img-2 и наоборот — а также добавляет stage-2 для .img-2.

Вот функции в полном объеме:

function swapStage2(e) {
var screen1 = holder.find('img.img-1');
var screen2 = holder.find('img.img-2');
screen1.attr('class','img-2 stage-2');
screen2.attr('class','img-1');
$('#trigger li.active').removeClass('rotate');
}

Проигнорируем последнее правило. Мы заинтересованы в подмене классов, поскольку элементы  img поменяли свои позиции, и был добавлен stage-2 в .img-2. 

Нужно помнить, что при создании нашего CSS, переходы .img-2 применяются к .img-1. Это происходит, когда элемент меняет свое положение. При завершении перехода, срабатывает еще одно событие.

holder.on ( "transitionend ' , 'img.img-2.stage-2 " , swapStage3 ) ;

Это работает так же, как и animationend , но с переходом CSS, поэтому, когда элемент возвращается обратно в стек, переход завершается, и вызывается функция swapStage3 .

 Опять же, вы можете наблюдать, как достаточно легко реализуются цепочки различных типов анимации CSS. 

• 30 классных уроков создания CSS меню
• Как избежать ошибок в CSS3
• Делаем навигацию на CSS3 с превью
• Учимся использовать css-свойство clip