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

Ниже приводится дополненное объявление перехода, в которое добавлены префиксы

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

Такая запись позволяет получить сглаживание цвета фона в последних версиях Safari, Chrome и Opera, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы.

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

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

Например, можно наложить переход на состояния

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

Следующий пример добавляет точно такое же переключение фона для состояния

.

Таким образом, переход произойдет либо от того, что на ссылку наведут курсор, либо от того, что на нее будет наведен фокус (например, клавиатурой).

 

Предположим, что кроме цвета фона хочется также менять цвет самой ссылки и накладывать переход на это изменение. Такого эффекта можно достичь, перечисляя одновременно несколько переходов и разделяя их запятой. На каждый переход можно навесить отдельную продолжительность и собственную временную функцию (рис. 2.03). (Продолжение строки отмечено символом»).

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

 

Вместо того чтобы перечислять несколько свойств, к которым хочется применить переход, можно использовать значение

. Тогда переход будет наложен на все возможные свойства.

Заменим перечисление

и  на значение . Теперь эти переходы получат одинаковую продолжительность и временную функцию.

 

Использование

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

Мы применили переход к свойствам background и color. Но есть много других свойств, на которые можно наложить переход, включая

, , и . Таблица всех свойств (и их типов значений) опубликована на сайте W3C [7] .

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