- Анимируем высоту c auto в CSS через transition
- Так как же это сделать?
- Анимация высоты с 0 до auto
- CSS-переход свойства height от 0px до auto
- Почему не работает transition у высоты, заданной в процентах?
- 3 ответа 3
- Using CSS Transitions on the Height Property
- Transitioning the Height
- 2.20. CSS3-переходы
- Создание плавных изменений свойств элементов
- Поддержка браузерами
- 1. Название свойства transition-property
- 2. Продолжительность перехода transition-duration
- 3. Функция перехода transition-timing-function
- 4. Задержка перехода transition-delay
- 5. Краткая запись перехода
- 6. Плавный переход нескольких свойств
- 7. Примеры переходов для различных свойств
Анимируем высоту c auto в CSS через transition
Пытались ли вы анимировать высоту ( height ) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого. И в этом есть небольшая проблема, что делать если нам нужно заанимировать высоту со значения auto до 0 ? К сожалению просто указать свойство transition не даст нам никакого эффекта. Но не спешите расстраиваться, это можно сделать не прибегая к помощи JavaScript.
Так как же это сделать?
Казалось бы, безвыходная ситуация, но это не так. Мы забыли про еще одно свойство, которое может нам в этом помочь. И это свойство max-height . Если вы уже догадались что делать дальше, отложите чтение этой стати и попробуйте реализовать анимацию сами. А потом возвращайтесь и сравните ваше решение с моим.
Чтобы все получилось, нужно сделать несколько шагов:
- Задать достаточно большую максимальную высоту, чтобы в дальнейшем анимировать её до нужных нам размеров;
- Установить overflow: hidden , чтобы содержимое скрывалось при анимации;
- Помнить про padding , а именно про то, что если он есть, то его тоже нужно будет анимировать до 0, чтобы наш блок полностью исчез;
Анимация высоты с 0 до auto
Демо можно посмотреть тут.
Теперь мы умеем анимировать высоту через CSS. И теперь можем делать без javascript такие штуки, как: спойлеры, выпадающие меню, раскрывающиеся попапы и т.д.
Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.
Источник
CSS-переход свойства height от 0px до auto
Хочу поделиться ещё одним способом создания css-перехода ( transition ) свойства height от 0px до auto .
Столкнулся с данной проблемой при разработке веб-компонентов TreeView и DataGrid. В TreeView решил сделать плавное развёртывание/свёртывание узлов, а в DataGrid — строки с дополнительным контентом. Почитав интернет, нашёл несколько способов реализации, основные — через свойство max-height и на javascript. Реализация на javascript была исключена — есть же css с поддержкой переходов и анимаций. Остался max-height , тем более в примерах с выпадающими меню всё работает.
В TreeView каждый узел имеет неограниченную вложенность, поэтому сразу не получится определить максимальную высоту его содержимого, да и если max-height задать очень большим, будут проблемы с анимацией перехода. Также, если развернуть дочерние узлы, высота родительского увеличится и может перекрыть max-height . Как ни крути, max-height не подходит. С DataGrid та же проблема — дополнительный контент в строке может быть любой. Нужен height:auto !
Итак, приступим к реализации перехода по свойству height от 0px до auto . Рассмотрим простой пример.
- elBlock: HTMLDivElement — блок, который нужно развёртывать/свёртывать;
- elToggle: HTMLButtonElement — кнопка-переключатель состояния.
Определим css-класс для блока, в котором установим обрезку содержимого и сам переход:
Опишем обработчик события onClick для elToggle :
Осталось добавить возврат height:auto после перехода:
Ну вот и всё, теперь развёртывание/свёртывание блока работает как надо и не зависит от размера контента.
Рисунок 1 — Пример развёртывания/свёртывания узлов в TreeView
Стоит отметить минусы данного подхода:
- использование javascript, хотелось бы только css;
- во время перехода может измениться контент (его высота, scrollHeight ) и после его завершения, в случае возврата auto , высота блока резко поменяется в ту или иную сторону. Для избежания данного эффекта, необходимо отслеживать изменение scrollHeight и менять height . Как показывает практика, обычно переходы развёртывания/свёртывания занимают по 0.5 с, а за это время пользователь вряд ли успеет изменить что-то внутри, например, в случае TreeView, развернуть дочерний узел.
Спасибо за внимание!
Источник
Почему не работает transition у высоты, заданной в процентах?
Почему пропадет transition при указании % соотношения?
Если указать height: 500px работает плавный переход, если указать height: 100% раскрытие проходит мгновенно.
Подскажите почему и как правильно изменить код.
3 ответа 3
В твоём коде 100% на самом деле означают auto , поскольку у контейнера не задана высота.
Если её задать, то плавное разворачивание будет.
Понял, как сделать, чтобы transition заработал без указания высоты.
Пусть высота всегда будет auto, а изменяется максимальная высота:
Хотя это не совсем так работает, как надо. Анимируется весь диапазон max-height, а не высота.
Свойство height относится к свойствам, которые лучше не анимировать, потому что анимировать желательно всего два свойства — opacity и transform .
При анимации height браузер начинает перерасчитывать макет, а значит на каждом фрейме анимации будет вызвана перерисовка. Чтобы этого избежать, в нашем случае, будем анимировать transform .
Для начала, необходимо вынести объект, который будем анимировать, в отдельный композиционный слой — это делается при помощи will-change: transform или по-старинке transform: translateZ(0) . А после этого уже можно воспользоваться трюком с transform: scaleY(0) / scaleY(1) .
Самостоятельно разницу можно пощупать в Developer Tools → Console → esc → Rendering → Paint Flashing.
Источник
Using CSS Transitions on the Height Property
Little effects on our web pages can make a lot of difference on the user experience of a website. When the state of an element is changed, it’s pretty cool to have a visual effect to show that an action occurred. Thanks to CSS transitions, we have a wide range of transition effects that can be used on our HTML elements.
The height of an element is one CSS property that often needs to be transitioned. Sometimes, we want a part of an element to be collapsed until it is needed. That is, when a button is clicked, the height of an element increases or decreases. See more buttons and bootstrap panels make use of this technique. Transition effects come with some frameworks like Bootstrap and JQuery. Yet, CSS transitions give you a whole lot of flexibility in transitioning the height. Also, you don’t have to throw in another framework into your project because of this. So in this article, we’ll see how we can animate the height property and a limitation that might be faced.
Transitioning the Height
We’ll be using a simple example to explain this. We have an article that we will collapse at first. Clicking on a see more button will increase the height of the element to show all the contents of the article. We will create a CSS class for this. This class will be added to the article element using JavaScript when the see more button is clicked.
So first, we’ll add an article element to an HTML file.
Источник
2.20. CSS3-переходы
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .
Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).
Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after . Для задания всех свойств перехода обычно используют краткую запись свойства transition .
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.
Создание плавных изменений свойств элементов
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
transition-property | |
---|---|
Значения: | |
none | Отсутствие свойства для перехода. |
all | Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента. |
свойство | Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
2. Продолжительность перехода transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
transition-duration | |
---|---|
Значения: | |
время | Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms . |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
3. Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
transition-timing-function | |
---|---|
Значения: | |
ease | Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) . |
linear | Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) . |
ease-in | Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) . |
ease-out | Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) . |
ease-in-out | Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) . |
cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
Рис. 1. Пользовательские функции cubic Bézier с сайта easings.net
Пользовательское название | Значение функции |
---|---|
easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. Задержка перехода transition-delay
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
transition-delay | |
---|---|
Значения: | |
время | Время задержки перехода указывается в секундах или миллисекундах. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
5. Краткая запись перехода
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись
6. Плавный переход нескольких свойств
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
7. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
Источник