У меня проблема с переходом, который я использую для вставки и выключения панели.
Пожалуйста, взгляните на следующий jsbin http://jsbin.com/uvejuj/1/
Обратите внимание, что когда я нажимаю кнопку переключения, первый раз переход происходит немедленно.
Однако, если я снова нажму кнопку, чтобы закрыть, то переход задержит время перехода до его выполнения.
Что вызывает задержку при закрытии и как я могу избавиться от нее?
Спасибо
Это потому, что вы анимации между максимальной высотой от 0 до 1000 пикселей, но ваш контент составляет всего около 120 пикселей. Задержка - это анимация, происходящая на 880 пикселях, которые вы не видите.
Либо установите максимальную высоту на известную высоту вашего содержимого (если вы ее знаете - например: http://jsbin.com/onihik/1/) или попробуйте другой способ. Возможно, что-то вроде fooobar.com/questions/896/...
Решение по исправлению ошибок:
Положите функцию перехода кубического безье (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;
}