Transition height auto не работает

Анимируем высоту c auto в CSS через transition

Пытались ли вы анимировать высоту ( height ) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого. И в этом есть небольшая проблема, что делать если нам нужно заанимировать высоту со значения auto до 0 ? К сожалению просто указать свойство transition не даст нам никакого эффекта. Но не спешите расстраиваться, это можно сделать не прибегая к помощи JavaScript.

Так как же это сделать?

Казалось бы, безвыходная ситуация, но это не так. Мы забыли про еще одно свойство, которое может нам в этом помочь. И это свойство max-height . Если вы уже догадались что делать дальше, отложите чтение этой стати и попробуйте реализовать анимацию сами. А потом возвращайтесь и сравните ваше решение с моим.

Чтобы все получилось, нужно сделать несколько шагов:

1. Задать достаточно большую максимальную высоту, чтобы в дальнейшем анимировать её до нужных нам размеров;
2. Установить overflow: hidden , чтобы содержимое скрывалось при анимации;
3. Помнить про 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.

Источник

CSS transition not working for percentage height?

I have the following CSS definitions:

These are applied to a div with some content inside of it.

I also have some javascript that when a div is clicked it changes the class name on the element. This works fine for expanding and collapsing but there is no animation on the iphone? (All other transitions I tried work fine with fluid animation) Any ideas?

9 Answers 9

The (pure CSS) solution so far

If you leave height:auto; and use fixed values of max-height you can simulate a transition:

Pay attention to the transition duration and max-height when the element is expanded. Play with the values until you get the wanted behavior.

This way you can get a transition between two defined values (in the above example, from 0 to 300) while the height property will just «follow» the max-height transition and grow until it gets the content’s size.

Demos

DEMO 1 — a working example of this solution

DEMO 2 — just demonstration of what is going on in DEMO 1

Observations

For now transitions are implemented only between predefined values and I supposed it is because the engine cannot guess the initial or final value in some cases. What if you have a height transition which its final value is 50% but transition itself affects the parent’s height somehow?! It would probably require several reflow calculations on each frame causing performance issues.

Like fabb said, the spec for CSS transitions determines that percentage values should be supported, so it might be just a matter of time until engines decides on which cases they’re going to support transitions using dynamically valued points. Still, I’m not sure about what could be considered the correct behavior for auto values thought.

Источник