Почему происходит задержка анимации?

Question

[Мар'ян Витак]

Когда блок разворачивается, то анимация происходит нормально, а когда сворачивается, то с задержкой. Скажите пожалуйста с чем это связано и как решить этот баг?

Код можно увидеть здесь

Answer 1

[Евгений Вольф]

Почему происходит задержка анимации?

По тому, что у блока который Вы сворачиваете не фиксированная высота (точнее по тому, что вы меняете её на height: auto). И в Вашем случае, он сворачивается так, буд-то он имел высоту 500px, а не ту, которую он имел фактически (если вы зададите ему фактическую высоту в 500px или растянете его с помощью содержимого до 500px - задержки не будет).

"Хорошего" решения - нет. Единственное решение в данном случае - не используйте height: auto.

Comments

[Мар'ян Витак]

Тогда получается чтобы "обойти" этот баг можно задать не 500, а максимально приближенную к реальной? Дело в том, что у меня несколько таких блоков и у каждого неизвестна высота.

[Евгений Вольф]

Мар'ян Витак, да, можете попробовать задать максимально близкую к конечной высоту (+ небольшой запас). Но, это не "баг", а скорее "особенность". Сейчас не вспомню уже подробности, но помню как-то я находил детальное описание этого поведения на уровне браузера...

Answer 2

[profesor08]

Раз ты в любом случае используешь Javascript, то играться с max-height и переключением классов смысла никакого нет. У блока есть неизменное значение его высоты, выраженное как scrollHeight, оно всегда отражается высоту контента блока, независимо от фактического размера. Вот задай транизицию на css на height, установи высоту блока равную scrollHeight, таким образом он зафиксируется, потом установи значение 300, тогда он плавно схлопнется. Чтоб раскрыть установи высоту в значение scrollHeight, блок плавно раскроется, после раскрытия (setTimeout поможет), поставь height: auto, чтоб блок вел себя адаптивно.

Answer 3

[Максим Сиваконь]

Что то совсем сложно! Можно сделать иначе! создайте класс .active и сделайте стили для него! в Jquery напиши обработку клика.

Например у нас есть вот такой вот код:

.myblock{
    height:50px; // это будет наша фиксированная высота! 
}
.myblock.active{
    height:auto; // это будет наша неизвестная высота! она выставляется сама. То-есть блок раскроется полностью.
}

$('.myblock').click(function(){ // обработка клика
if ($(".myblock").hasClass("active")) { // проверяем есть ли у нас такой класс active
        $(".myblock").removeClass("active"); // если есть то удаляем его
       //сюда можно вставить ваш код которые будет менять текст
    }
esle{
    $(".myblock").addClass("active");// если нету то добавляем
    //сюда можно вставить ваш код которые будет менять текст
}
});

То-есть когда есть у нас класс active то срабатывают другие стили а когда его нет то другие стили!

Comments

[Мар'ян Витак]

Так у меня и есть класс active с отдельными стилями и код имеет ту же логику, просто написано короче, вместо if else используется toggle. Плюс, если сделать стили так как вы указали, то transition не срабатывает.

[Максим Сиваконь]

Мар'ян Витак, срабатывает! Если указать на active , transition . Тот код который я описал выше его использую всегда, и таких задержек у меня нет!

[Максим Сиваконь]

Мар'ян Витак,Cмотри в CSS. У вас задержка в 1 секунду. Попробуй убрать с класса expand__content transition!

+ на overflow, transition - не работает!