Как удалить задержку на Css3 Переход с выводом, который использует переход max-height

У меня проблема с переходом, который я использую для вставки и выключения панели.

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

Однако, если я снова нажму кнопку, чтобы закрыть, то переход задержит время перехода до его выполнения.

Что вызывает задержку при закрытии и как я могу избавиться от нее?

Ответы

Ответ 1

Это потому, что вы анимации между максимальной высотой от 0 до 1000 пикселей, но ваш контент составляет всего около 120 пикселей. Задержка - это анимация, происходящая на 880 пикселях, которые вы не видите.

Либо установите максимальную высоту на известную высоту вашего содержимого (если вы ее знаете - например: http://jsbin.com/onihik/1/) или попробуйте другой способ. Возможно, что-то вроде fooobar.com/questions/896/...

Ответ 2

Исправлено JS Bin

Решение по исправлению ошибок:

Положите функцию перехода кубического безье (0, 1, 0, 1) для элемента.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}