Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Объединение CSS-анимации и JavaScript

21 ноября 2012 | Опубликовано в css | 2 Комментариев »

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

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

Давайте с самого начала уточним, что для того, чтобы  показать, как можно объединить CSS-анимацию и события JavaScript,  мы будем использовать карусель MacGuffin. Конечно, существуют другие способы создания слайд-шоу, которые являются лучшими, но они не смогут отобразить, как применять анимацию событий.

Разметка 

Основная разметка является достаточно простой. Это блок DIV с двумя дочерними элементами IMG, каждый из которых имеет свой уникальный класс:

<div class="holder">
<img class="img-1" src="kitten-1.jpg">
<img class="img-2" src="kitten-2.jpg">
</div>
Для управления слайд-шоу используется  упорядоченный список четырех элементов, каждый из которых имеет атрибут data, значение которого является названием одного из четырех файлов изображений, которые будут использовать в примере:
.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.

@keyframes upndown {

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. 

Функция . swapStage3 выполняет свое действие: чтобы избежать конфликтов в сценарии, она удаляет  .img-2  из DOM и вставляет его после того, как происходит восстановление первоначального запроса DOM.
function swapStage3(e) {
var screen1 = holder.find('img.img-1');
var screen2 = holder.find('img.img-2');
screen2.removeClass('stage-2').detach();
screen1.after(screen2);
Но это еще не все. В нашем сценарии есть еще одно событие:
holder.on ( "animationstart ' , 'img.img-2.stage-1 " , поворот ) ;
Как можно догадаться, событие Animationstart вызывается не  когда анимация upndown заканчивается, а когда она начинается.
 В нашем сценарии событие используется для вызова функции rotate, которая добавляет класс для активного управления. swapStage2. Пока происходит основная анимация, происходит вращение, которое заканчивается с окончанием анимации, как мы видели ранее в функции swapStage2.  Этот эффект вращения является дополнительным и он совсем не обязателен. Но это хороший способ , чтобы продемонстрировать animationstart.
Если вы хотите  увидеть возможности CSS анимации, посмотрите на галерею Animatable Lea Verou.
Итоги
Как уже было сказано вначале, существуют более практичные способы для создания эффекта карусели.  Но это хороший и простой способ, чтобы продемонстрировать CSS-анимацию событий, которые чрезвычайно полезны для построения цепочки анимации и строк функций.
Автор: Peter Gasston
Перевод: Дежурка
Возможно, Вас заинтересуют статьи:



Комментарии