Чтение онлайн

Теперь мы объявим неактивное состояние ссылки с небольшим отступом и светло-зеленым фоном и затем укажем темно-зеленый цвет при наведении (рис. 2.01):

Рис. 2.01. Обычное состояние ссылки и: hover

Теперь наложим переход на это изменение. Переход сгладит и анимирует изменение в течение указанного промежутка времени (рис. 2.02).

Рис. 2.02. Печатная страница – не лучший способ показать анимированный переход, но на этой картинке попытались сделать именно это: плавный переход от светло– зеленого к темно-зеленому фону

Ради компактности будем использовать только те браузерные префиксы, которые сейчас работают в браузерах на движке WebKit (это Safari и Chrome). Позже добавим префиксы для Firefox и Opera.

В этом коде можно увидеть три составляющих перехода:

• 

 – свойство, на которое будет накладываться переход (в этом случае – свойство background);

• 

 – продолжительность перехода (0,3 с);

• 

 – как быстро переход осуществляется с течением времени (ease).

Значение временной функции позволяет менять скорость перехода с течением времени одним из шести способов:

, , , , и , который позволяет определить произвольную временную кривую.

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

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

Если сомневаетесь, знайте: значения

(значение по умолчанию) или прекрасно подходят для коротких переходов.

Можно сделать так, чтобы переход осуществлялся не сразу после того, как срабатывает связанное с ним событие, но с некоторой задержкой. Например, сделаем так, чтобы переход цвета фона происходил через полсекунды после того, как ссылка попала в состояние hover. Такого поведения можно добиться свойством

.

Можно существенно упростить объявление перехода (в котором нет задержки), пользуясь свойством transition. Такой синтаксис будет использоваться во всех остальных примерах этой книги.

 

Мы получили намного более компактное правило, которое дает точно такой же результат.

Если нужно добавить полусекундную задержку в краткую запись перехода, ее продолжительность ставится в конец правила:

Разумеется, эти замечательные переходы прекрасно действуют в браузерах, работающих на движке WebKit. Что насчет остальных?

Как упоминалось ранее, переходы были изначально разработаны для движка WebKit и включены в Safari и Chrome начиная с версии 3.2, но Opera также поддерживает их начиная с 10.5 [5] . Поддержка заявлена и в Firefox 4.0 [6] .

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