Высота webkit-перехода для div с динамически изменяющейся высотой в зависимости от содержимого?

см. следующий jsFiddle

http://jsfiddle.net/SgyEW/10/

Вы можете нажимать различные кнопки, которые показывают содержимое разной длины, что приводит к увеличению / уменьшению окна.

Я хочу, чтобы изменение высоты было анимированным, чтобы оно не было таким резким, я попробовал это, добавив:

-webkit-transition: all 1s linear;

Но в данном случае это не действует. Есть идеи относительно решения, не требующего JavaScript?

Спасибо


css webkit transitions
person TheExit    schedule 05.07.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Боюсь, что невозможно анимировать высоту с помощью переходов CSS3 без помощи Javascript, проверьте:

Как изменить высоту перехода: 0; по высоте: авто; с помощью CSS?

Можете ли вы использовать CSS3 для перехода от высоты: 0 к переменной высоте содержания?

Кроме того, ваш код изменяется с display: none на display: block, что в любом случае не повлияет на высоту. Вместо отображения none используйте height: 0 с overflow: hidden;

person methodofaction    schedule 06.07.2011

arrow_upward
1
arrow_downward

Прошло 8 лет, но для тех, кто ищет решение этой просьбы:

JS Fiddle

CSS

#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}

.content {display:none}

.new_content {
  transition: 1s;
}

JS

$('.toggler').on('click', function() {

var idname = $(this).attr('name');
var content = $('#' + idname).html();
var content_height = $('#' + idname).height();
$('.new_content').html(content).css("height", content_height);

});

Кроме того, что было изменено:

  • Вы больше не используете display: none и display: block в качестве метода, на котором вы основаны. Вы предпочитаете использовать замену содержимого статического показанного div
  • У содержимого div ('.new_content') нет высоты, это необязательно.
  • JS устанавливает высоту на основе скрытого div.
  • Переход делает свою работу.

Надеюсь, поможет.

person YArea    schedule 25.07.2019
comment
На самом деле это не совсем то, о чем просили ... это не динамически анимирует высоту, а устанавливает ее напрямую. Если высота содержимого изменяется без запуска перерасчета высоты (в этом примере просто путем изменения размера окна), это не удается. Можно было бы использовать различные триггеры для получения большинства случаев, но тогда это было бы не очень эффективно, я думаю ... - person GDY; 04.11.2019