Высота 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.
- Переход делает свою работу.
Надеюсь, это поможет.