Fold, folder, foldest

Магия CSS. Глава 6. Переходы

“Все, что вам нужно знать о переходах в CSS”

Перед прочтением этой главы, пожалуйста, прочитайте All you need to know about CSS Transitions от Алекса МакКоя. Это фантастический ресурс, отвечающий на большую часть вопросов.

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

Теперь давайте объединим это знание с тем, что мы узнали в предыдущих главах о Цвете и Типографике.

Одним из самых мощных инструментов является свойство transition-delay. Оно отвечает за задержку перед началом перехода. В этом примере мы зададим как будто случайные задержки для каждой буквы, создавая эффект проявления. Очень изящно и привлекательно.

CSS переходы по-настоящему раскрывают свой потенциал если их группировать. В этом примере мы укажем два перехода, один для преобразования (transform) и второй — для прозрачности (opacity). Оба указываются через запятую в качестве значения одного свойства transition.

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

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

И, если вам интересно, переходы работают и для 3D-преобразований.

Конечно же это только верхушка айсберга. Цвета, градиенты, размеры, позиционирование, ориентация и т.д.—ко всему этому списку применимо свойство transition. Кроме того существуют свойства задержки и замедления. Переходы CSS очень просты в использовании. Поверьте, браузер будет делать то, что вы хотите. Transition хорошо поддерживается.

Комбинация состояний в HTML и переходов в CSS открывает широкие возможности для интерактива. Здесь мы используем псевдо-класс :checked для радиокнопок чтобы стилизовать элементы, следующие за ними. Этот метод часто называют “The Checkbox Hack”, но он работает с любыми элементами, для которых применимы псевдо-классы :checked, :focus.

В этом примере много тонкостей, но основная идея: каждая секция аккордеона имеет label, связанный с радиокнопкой при помощи id. И так, три секции, три радиокнопки. Кнопки расположены в документе непосредственно перед содержимым секции, так что мы можем использовать в селекторе + для задания стилей раскрытого состояния секций.

После нажатия на label кнопка переходит в состояние :checked (и наоборот при повторном нажатии), срабатывает механизм открытия/закрытия соответствующей секции.

И вуаля! Аккордеон на чистом HTML и CSS.

Если вы ищете вдохновляющие примеры того, что можно сделать при помощи transition — посмотрите эти невероятные демо:

Для тех, кто любит приправить свой CSS щепоткой JS существует jquery.transit от rstacruz. Для простых статических переходов (оксюморон?) она чрезмерна. Но вы можете найти ей применение в случаях, когда создаете динамические переходы или переходы с пользовательскими переменными.

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC