transition — property
Указываем точно, какое свойство будет меняться плавно.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Если нам нужно анимировать переход нескольких свойств элемента (например, цвета и размера шрифта), то удобно перечислить их в свойстве transition — property .
Пример
Скопировать ссылку «Пример» Скопировано
.box transition-property: color, font-size; transition-duration: 0.3s, 0.5s;>.box transition-property: color, font-size; transition-duration: 0.3s, 0.5s; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector transition-property: color;>.selector transition-property: color; >
.selector transition-property: transform, height, color;>.selector transition-property: transform, height, color; >
.selector transition-property: all;>.selector transition-property: all; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Когда нужно анимировать переход сразу нескольких свойств элемента, то лучше использовать не комплексное свойство transition , а каждое из подсвойств в отдельности. Код получится более понятным и вы не запутаетесь в длинных строчках. Сравним:
.box transition: color 0.2s, transform 0.3s, padding-left 0.5s, padding-right 0.5s;> .box transition-property: color, transform, padding-left, padding-right; transition-duration: 0.2s, 0.3s, 0.5s, 0.5s;>.box transition: color 0.2s, transform 0.3s, padding-left 0.5s, padding-right 0.5s; > .box transition-property: color, transform, padding-left, padding-right; transition-duration: 0.2s, 0.3s, 0.5s, 0.5s; >
Во втором примере строк больше, но он выглядит понятнее и проще читается.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Чтобы свойство анимировалось, не забывайте добавлять transition — duration , иначе браузер не поймёт, какой длительности должны быть переходы свойств.
💡 transition — property может принимать значение all , что говорит браузеру о том, что нужно будет плавно изменять все возможные свойства элемента. Такая запись сильно короче, но заставляет браузер выполнять лишнюю работу по проверке каждого CSS-свойства. Поэтому правилом хорошего тона считается не использовать all , а перечислить только изменяющиеся свойства.
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
🛠 В реальных проектах не так часто приходится плавно изменять более двух свойств одновременно, поэтому свойство transition — property используется довольно редко. В основном переходы стилизуются с использованием комплексного свойства transition .
Плавное изменение высоты блока на CSS
Рассмотрим способ решения проблемы сворачивания и разворачивания блока неизвестной высоты на чистом CSS. Это распространённая задача, которая часто вызывает трудности в реализации, когда значение свойства «height» не задано явно, а находится в состоянии «auto».
Для начала посмотрите как работает решение на практике:
Принцип работы
Обычная реализация подразумевает знание начальной и конечной высоты блока. Чтобы обойти это ограничение, будем использовать свойство «max-height». Для свёрнутого значения оно будет нулевым, а для открытого — максимально большим. В нашем случае точно хватит 1000 пикселей.
Стиль блока в раскрытом состоянии:
Свёрнутое состояние будет происходить за счёт добавления класса «expansion-hide».
- В развёрнутом виде у «DIV» будет класс «expansion-body».
- В свёрнутом — «expansion-body expansion-hide».
Плавное сворачивание и разворачивание достигается с помощью нелинейной трансформации максимальной высоты. Значение от 1000 до 0 меняется сначала очень быстро, а потом резко замедляется. Это сглаживает анимацию, если высота блока намного меньше 1000 пикселей. При обычной линейной трансформации при сворачивании была бы задержка.
Описанный способ легко адаптируется для плавного изменения ширины путём применения свойства «max-width».
Добавление класса и возможные проблемы
Для добавления и удаления класса «expansion-hide» в примере использовался чистый JS. Он не влияет на сам процесс анимации. В обработчике «onclick» всего одна строка кода.
document.getElementById('expansion-body').classList.toggle('expansion-hide') Сама html-разметка также проста:
Небольшое предупреждение — не добавляйте к блоку отступы «padding», иначе он не будет до конца закрываться. Если они нужны, то создайте внутри ещё один «div» и добавляйте произвольные стили к нему.
PS Чтобы поблагодарить за решение напишите любой комментарий.
Плавное изменение высоты блока на CSS
Рассмотрим способ решения проблемы сворачивания и разворачивания блока неизвестной высоты на чистом CSS. Это распространённая задача, которая часто вызывает трудности в реализации, когда значение свойства «height» не задано явно, а находится в состоянии «auto».
Для начала посмотрите как работает решение на практике:
Принцип работы
Обычная реализация подразумевает знание начальной и конечной высоты блока. Чтобы обойти это ограничение, будем использовать свойство «max-height». Для свёрнутого значения оно будет нулевым, а для открытого — максимально большим. В нашем случае точно хватит 1000 пикселей.
Стиль блока в раскрытом состоянии:
Свёрнутое состояние будет происходить за счёт добавления класса «expansion-hide».
- В развёрнутом виде у «DIV» будет класс «expansion-body».
- В свёрнутом — «expansion-body expansion-hide».
Плавное сворачивание и разворачивание достигается с помощью нелинейной трансформации максимальной высоты. Значение от 1000 до 0 меняется сначала очень быстро, а потом резко замедляется. Это сглаживает анимацию, если высота блока намного меньше 1000 пикселей. При обычной линейной трансформации при сворачивании была бы задержка.
Описанный способ легко адаптируется для плавного изменения ширины путём применения свойства «max-width».
Добавление класса и возможные проблемы
Для добавления и удаления класса «expansion-hide» в примере использовался чистый JS. Он не влияет на сам процесс анимации. В обработчике «onclick» всего одна строка кода.
document.getElementById('expansion-body').classList.toggle('expansion-hide') Сама html-разметка также проста:
Небольшое предупреждение — не добавляйте к блоку отступы «padding», иначе он не будет до конца закрываться. Если они нужны, то создайте внутри ещё один «div» и добавляйте произвольные стили к нему.
PS Чтобы поблагодарить за решение напишите любой комментарий.