Анимация max-height с переходами CSS

Я хочу создать анимацию expand/collapse, которая работает только по классам (javascript используется для переключения имен классов).

Я даю один класс max-height: 4em; overflow: hidden;

а другой max-height: 255em; (я также попробовал значение none, которое вообще не было анимировано)

для анимации: transition: max-height 0.50s ease-in-out;

Я использовал переходы CSS для переключения между ними, но браузер, похоже, оживляет все эти дополнительные em, поэтому он создает задержку в эффекте коллапса.

Есть ли способ сделать это (в том же духе - с css classnames), который не имеет этого побочного эффекта (я могу поместить меньшее количество пикселей, но это, очевидно, имеет недостатки, поскольку оно может прервать законное текст - что причина большой ценности, поэтому он не отрезает законный длинный текст, только смехотворно длинный)

См. jsFiddle - http://jsfiddle.net/wCzHV/1/ (щелкните текстовый контейнер)

Ответы

Ответ 1

В случае, если кто-то читает это, я не нашел решение и пошел с эффектом расширения (что было достигнуто путем перемещения стиля transition к расширенному определению класса)

Ответ 2

Решение по исправлению ошибок:

Положите функцию перехода кубического безье (0, 1, 0, 1) для элемента.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

Ответ 3

Это старый вопрос, но я только что разработал способ сделать это и захотел придерживаться его где-нибудь, поэтому я знаю, где его найти, если он понадобится снова: o)

Итак, мне нужен аккордеон с интерактивными разделами "sectionHeading", которые показывают/скрывают соответствующие div раздела "sectionContent". Разделы контента div имеют переменную высоту, что создает проблему, так как вы не можете анимировать высоту до 100%. Я видел другие ответы, предлагающие анимацию max-height вместо этого, но это означает, что иногда вы получаете задержки, когда максимальная высота, которую вы используете, больше фактической высоты.

Идея состоит в том, чтобы использовать jQuery для загрузки, чтобы найти и явно установить высоты divs раздела "Контент". Затем добавьте класс css 'noHeight' каждому обработчику кликов, чтобы переключить его:

$(document).ready(function() {
    $('.sectionContent').each(function() {
        var h = $(this).height();
        $(this).height(h).addClass('noHeight');
    });
    $('.sectionHeader').click(function() {
        $(this).next('.sectionContent').toggleClass('noHeight');
    });
});

Для полноты соответствующие классы css:

.sectionContent {
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.noHeight {
        height: 0px !important;
}

Теперь переходы высоты работают без каких-либо задержек.

Ответ 4

Недавно я нашел решение, в то время как возился с тем, что мне нравилось делиться.

Люди, которые непосредственно хотят увидеть результат:

https://jsfiddle.net/dt52jazg/

Ниже приведен код:

HTML

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

JS

(function() {
  $('.click-me').on('click', function() {
    $('.list').toggleClass('active');
  });
})();

Пожалуйста, дайте мне знать, есть ли какие-либо проблемы с этим решением, поскольку я чувствую, что с этим решением не будет ограничений max-height.

Ответ 5

Вы можете сделать это просто отлично, используя jQuery Transit:

$(function () {
    $(".paragraph").click(function () {
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

Вы можете определенно привести его в порядок, но это должно делать то, что вы хотите.

JS Fiddle Demo