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

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

Код можно увидеть здесь
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 3
Wolfnsex
@Wolfnsex Куратор тега CSS
Если не хочешь быть первым - не вставай в очередь!
Почему происходит задержка анимации?
По тому, что у блока который Вы сворачиваете не фиксированная высота (точнее по тому, что вы меняете её на height: auto). И в Вашем случае, он сворачивается так, буд-то он имел высоту 500px, а не ту, которую он имел фактически (если вы зададите ему фактическую высоту в 500px или растянете его с помощью содержимого до 500px - задержки не будет).

"Хорошего" решения - нет. Единственное решение в данном случае - не используйте height: auto.
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Раз ты в любом случае используешь Javascript, то играться с max-height и переключением классов смысла никакого нет. У блока есть неизменное значение его высоты, выраженное как scrollHeight, оно всегда отражается высоту контента блока, независимо от фактического размера. Вот задай транизицию на css на height, установи высоту блока равную scrollHeight, таким образом он зафиксируется, потом установи значение 300, тогда он плавно схлопнется. Чтоб раскрыть установи высоту в значение scrollHeight, блок плавно раскроется, после раскрытия (setTimeout поможет), поставь height: auto, чтоб блок вел себя адаптивно.
Ответ написан
Что то совсем сложно! Можно сделать иначе! создайте класс .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 то срабатывают другие стили а когда его нет то другие стили!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Eduson Москва
от 60 000 до 80 000 руб.
Bright Rich Санкт-Петербург
от 100 000 руб.
от 60 000 до 90 000 руб.
21 июл. 2019, в 16:20
10000 руб./за проект
21 июл. 2019, в 16:04
1000 руб./за проект
21 июл. 2019, в 15:45
1500 руб./за проект