Есть ли способ изменить определенный атрибут переходным образом, одновременно изменяя другой атрибут, когда переход завершен?
Я хочу изменить height
элемента переходным образом от 0
до 100%
. Когда height
равна 0
, я хочу, чтобы ее overflow
было hidden
, а когда height
достигает 100%
, я хочу, чтобы ее overflow
стало auto
.
Я попробовал это:
#foo{
height: 0;
overflow: hidden;
transition: height 0.25s;
}
#foo.some-state{
height: 100%;
overflow: auto;
}
Это вызывает странный эффект. Если конечное состояние заканчивается с достаточной высотой, так что нет необходимости в полосе прокрутки, происходит то, что полоса прокрутки сначала отсутствует на height: 0
. Затем он появляется, когда начинается переход, и поддерживается во время перехода, в то время как высота недостаточна. Когда высота становится достаточной, полоса прокрутки снова исчезает.
В этом случае я хочу, чтобы полоса прокрутки не появлялась во время перехода. Другими словами, я хочу, чтобы overflow
переключалось с hidden
на auto
когда переход завершен. Как это может быть сделано?
Это невозможно с помощью CSS-перехода. Если вы хотите больше ничего не использовать, вы можете установить overflow:scroll
вместо этого overflow:scroll
, так что полоса прокрутки появится с самого начала.
Это событие transitionend
которое позволяет вам реагировать на конец перехода с помощью JS. Таким образом, с небольшой функцией обработчика вы можете добавить overflow:auto
(или установить класс для этого эффекта) только тогда.
Другим способом может быть использование анимации вместо перехода. Вам нужно будет указать overflow
в каждом ключевом кадре, потому что overflow
является свойством, которое не может быть интерполировано, и как таковое было бы полностью исключено из анимации.
transitionend
событие, которое позволяет вам реагировать на него с помощью JS. Если вы хотите сделать это без этого, вы можете вместо этого установитьoverflow:scroll
, чтобы полоса прокрутки появлялась с самого начала. Использование анимации вместо перехода может быть другим способом.