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

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

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

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

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

-webkit-transition: all 1s linear;

Но это не имеет никакого эффекта в этом случае использования. Любые идеи с точки зрения решения, которое не требует JavaScript?

Спасибо

Ответы

Ответ 1

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

Как переместить высоту: 0; высота: авто; используя CSS?

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

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

Ответ 2

Прошло 8 лет, но для тех, кто ищет решение по этому запросу:

Вот мой JS Fiddle

http://jsfiddle.net/0vLmq97j/1/

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 ('.new_content') нет высоты, его необязательно.
  • JS устанавливает высоту на основе скрытого div.
  • Переход делает свою работу.

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