Изменение атрибута после перехода

Question

Изменение атрибута после перехода

0

Есть ли способ изменить определенный атрибут переходным образом, одновременно изменяя другой атрибут, когда переход завершен?

Я хочу изменить 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 когда переход завершен. Как это может быть сделано?

sawa 24 фев. 2015, в 04:13

Источник

0

Это невозможно только через CSS-переход. Там есть transitionend событие, которое позволяет вам реагировать на него с помощью JS. Если вы хотите сделать это без этого, вы можете вместо этого установить overflow:scroll , чтобы полоса прокрутки появлялась с самого начала. Использование анимации вместо перехода может быть другим способом.
CBroe 24 фев. 2015, в 03:04
0

@CBroe Я приму это как ответ, если вы сделаете это так.
sawa 24 фев. 2015, в 03:14
0

@CarySwoveland Я только что увидел это. Это хорошо, что вы участвуете. Мне также нравится предлагать вещи там.
sawa 14 дек. 2015, в 08:48

Показать ещё 1 комментарий

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

Это невозможно только через CSS-переход. Там есть transitionend событие, которое позволяет вам реагировать на него с помощью JS. Если вы хотите сделать это без этого, вы можете вместо этого установить overflow:scroll , чтобы полоса прокрутки появлялась с самого начала. Использование анимации вместо перехода может быть другим способом.
@CBroe Я приму это как ответ, если вы сделаете это так.
@CarySwoveland Я только что увидел это. Это хорошо, что вы участвуете. Мне также нравится предлагать вещи там.

CBroe · Accepted Answer · 2015-02-24T02-03-00.000Z

Это невозможно с помощью CSS-перехода. Если вы хотите больше ничего не использовать, вы можете установить overflow:scroll вместо этого overflow:scroll, так что полоса прокрутки появится с самого начала.

Это событие transitionend которое позволяет вам реагировать на конец перехода с помощью JS. Таким образом, с небольшой функцией обработчика вы можете добавить overflow:auto (или установить класс для этого эффекта) только тогда.

Другим способом может быть использование анимации вместо перехода. Вам нужно будет указать overflow в каждом ключевом кадре, потому что overflow является свойством, которое не может быть интерполировано, и как таковое было бы полностью исключено из анимации.