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

Я пытаюсь сделать <ul>слайд вниз, используя CSS-переходы.

Начало <ul>начинается в height: 0;. При наведении высота установлена ​​на height:auto;. Тем не менее, это заставляет его просто появляться, а не переход,

Если я сделаю это от height: 40px;до height: auto;, то он будет скользить вверх height: 0;, а затем внезапно прыгнет на правильную высоту.

Как еще я могу сделать это без использования JavaScript?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

Используйте max-heightв переходе и нет height. И установите значение на max-heightчто-то большее, чем ваша коробка когда-либо получит.

Посмотрите демонстрацию JSFiddle, предоставленную Крисом Джорданом в другом ответе здесь.

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Вместо этого вы должны использовать scaleY.

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Я сделал версию вышеуказанного кода с префиксом поставщика на jsfiddle , и изменил ваш jsfiddle, чтобы использовать scaleY вместо height.

В настоящее время вы не можете анимировать по высоте, если используется одна из высот auto, вам нужно установить две явные высоты.

Решение , которое я всегда был первым Fade Out, а затем сжать font-size, paddingи marginзначения. Это не выглядит так же, как стирание, но работает без статического heightилиmax-height .

Рабочий пример:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}

<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p>

Я знаю, что это тридцатилетний ответ на этот вопрос, но я думаю, что оно того стоит. Это решение только для CSS со следующими свойствами:

• В начале отсрочки нет, и переход не прекращается рано. В обоих направлениях (разворачивание и свертывание), если в CSS указать длительность перехода 300 мс, переход занимает 300 мс (точка).
• Это переход фактической высоты (в отличие от transform: scaleY(0) ), поэтому он делает правильные вещи, если после свертываемого элемента есть контент.
• В то время (как и в других решениях) есть являются магические числа (например , «выбрать длину, которая выше , чем ваш ящик никогда не будет»), это не фатально , если ваше предположение заканчивается время неправильно. В этом случае переход может не выглядеть удивительно, но до и после перехода это не проблема: в расширенном состоянии ( height: auto) все содержимое всегда имеет правильную высоту (в отличие, например, если вы выбираете значение, max-heightкоторое оказывается слишком низко). А в свернутом состоянии высота равна нулю, как и должно быть.

демонстрация

Вот демонстрация с тремя складными элементами разной высоты, которые используют один и тот же CSS. Возможно, вы захотите нажать «Полная страница» после нажатия «Запустить фрагмент». Обратите внимание, что JavaScript только переключает collapsedкласс CSS, здесь нет измерения. (Вы можете сделать эту точную демонстрацию вообще без JavaScript, используя флажок или :target). Также обратите внимание, что часть CSS, которая отвечает за переход, довольно коротка, и HTML требует только одного дополнительного элемента-оболочки.

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});

.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

Как это работает?

На самом деле, есть два перехода, которые делают это возможным. Один из них переводит margin-bottomиз 0px (в расширенном состоянии) -2000pxв свернутое состояние (аналогично этому ответу ). 2000 здесь - первое магическое число, оно основано на предположении, что ваша коробка не будет выше этой (2000 пикселей кажется разумным выбором).

Использование margin-bottomодного перехода само по себе имеет две проблемы:

• Если у вас на самом деле есть окно, которое превышает 2000 пикселей, то margin-bottom: -2000px он не будет скрывать все - будут видимые элементы даже в свернутом корпусе. Это небольшое исправление, которое мы сделаем позже.
• Если фактическое поле имеет, скажем, высоту 1000 пикселей, а длина вашего перехода составляет 300 мс , то видимый переход уже закончился примерно через 150 мс (или, в противоположном направлении, начинается с опозданием на 150 мс).

Исправление этой второй проблемы - это то, где вступает второй переход, и этот переход концептуально нацеливается на минимальную высоту оболочки («концептуально», потому что мы на самом деле не используем min-heightсвойство для этого; подробнее об этом позже).

Вот анимация, которая показывает, как объединение перехода нижнего поля с переходом минимальной высоты, одинаковой длительности, дает нам комбинированный переход от полной высоты к нулевой высоте, которая имеет одинаковую длительность.

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

Для моей демонстрации я выбрал 50px в качестве верхнего минимального значения высоты. Это второе магическое число, и оно должно быть ниже, чем высота коробки. 50px кажется разумным; кажется маловероятным, что вы очень часто захотите сделать складной элемент, который не имеет даже 50 пикселей в первую очередь.

Как видно из анимации, результирующий переход является непрерывным, но он не дифференцируем - в момент, когда минимальная высота равна полной высоте, скорректированной по нижнему краю, происходит внезапное изменение скорости. Это очень заметно в анимации, потому что она использует линейную функцию синхронизации для обоих переходов, и потому что весь переход очень медленный. В реальном случае (моя демонстрация вверху) переход занимает всего 300 мс, а переход нижнего поля не является линейным. Я поиграл с множеством различных функций синхронизации для обоих переходов, и те, с которыми я закончил, чувствовали, что они работают лучше всего для самых разных случаев.

Осталось решить две проблемы:

1. точка сверху, где ящики высотой более 2000 пикселей не полностью скрыты в свернутом состоянии,
2. и обратная проблема, когда в не скрытом случае поля высотой менее 50 пикселей слишком высоки, даже когда переход не выполняется, поскольку минимальная высота сохраняет их на уровне 50 пикселей.

Мы решаем первую проблему, давая элемент контейнера a max-height: 0в свернутом случае с 0s 0.3sпереходом. Это означает, что это не действительно переход, а max-heightприменяется с задержкой; применяется только после завершения перехода. Чтобы это работало правильно, нам также нужно выбрать числовое значение max-heightдля противоположного, не свернутого состояния. Но в отличие от случая 2000px, где выбор слишком большого числа влияет на качество перехода, в этом случае это действительно не имеет значения. Таким образом, мы можем просто выбрать число, которое настолько высоко, что мы знаем что никакая высота никогда не приблизится к этому. Я выбрал миллион пикселей. Если вам кажется, что вам может потребоваться поддержка контента высотой более миллиона пикселей, то 1) извините и 2) просто добавьте пару нулей.

Вторая проблема - причина, почему мы фактически не используем min-heightдля минимального перехода высоты. Вместо этого ::afterв контейнере есть heightпсевдоэлемент с переходом от 50px к нулю. Это имеет тот же эффект, что и a min-height: он не позволит контейнеру сжиматься ниже той высоты, которую в настоящее время имеет псевдоэлемент. Но поскольку мы используем height, а не min-heightмы теперь можем использовать max-height(снова применяя с задержкой), чтобы установить фактическую высоту псевдоэлемента в ноль после завершения перехода, гарантируя, что, по крайней мере, за пределами перехода, даже небольшие элементы имеют правильная высота. Потому что min-heightэто сильнее , чем max-heightэто не будет работать , если мы использовали контейнерmin-height вместо псевдо-элементаheight, Как и max-heightв предыдущем абзаце, для этого max-heightтакже необходимо значение для противоположного конца перехода. Но в этом случае мы можем просто выбрать 50px.

Протестировано в Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (за исключением проблемы с разметкой flexbox с моей демонстрацией, которая не беспокоила отладка) и Safari (Mac, iOS ). Говоря о flexbox, должна быть возможность сделать это без использования flexbox; на самом деле, я думаю, вы могли бы заставить почти все работать в IE7 - за исключением того факта, что у вас не будет переходов CSS, что делает это довольно бессмысленным упражнением.

Вы можете, с небольшим количеством несемантических jiggery-pokery. Мой обычный подход состоит в том, чтобы анимировать высоту внешнего DIV, у которого есть единственный дочерний элемент, который является DIV без стилей и используется только для измерения высоты содержимого.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

Хотелось бы просто иметь возможность обойтись без .measuringWrapperи просто установить высоту DIV на auto и иметь эту анимацию, но это не похоже на работу (высота устанавливается, но анимация не происходит).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

Моя интерпретация заключается в том, что для запуска анимации необходима явная высота. Вы не можете получить анимацию по высоте, когда есть высота (начальная или конечная высота) auto.

Визуальное обходное решение для анимации высоты с использованием CSS3-переходов состоит в том, чтобы вместо этого анимировать отступы.

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

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (сброшенный Stephband выше jsFiddle)

Мой обходной путь - перевести max-height в точную высоту содержимого для хорошей плавной анимации, а затем использовать обратный вызов transitionEnd, чтобы установить max-height равным 9999px, чтобы содержимое могло свободно изменять размер.

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});

.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>

Принятый ответ работает в большинстве случаев, но не очень хорошо работает, когда вы divможете сильно различаться по высоте - скорость анимации не зависит от фактической высоты содержимого и может выглядеть нестабильно.

Вы по-прежнему можете выполнять фактическую анимацию с помощью CSS, но вам нужно использовать JavaScript для вычисления высоты элементов, а не пытаться использовать auto. JQuery не требуется, хотя вам, возможно, придется немного изменить его, если вы хотите совместимости (работает в последней версии Chrome :)).

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}

#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}

<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Было мало упоминания о Element.scrollHeightсвойстве, которое может быть полезно здесь и все еще может использоваться с чистым переходом CSS. Свойство всегда содержит «полную» высоту элемента, независимо от того, переполняется ли его содержимое в результате свернутой высоты (например height: 0).

Таким образом, для height: 0(эффективно полностью свернутого) элемента его «нормальная» или «полная» высота все еще легко доступна через его scrollHeightзначение (неизменно длину в пикселях ).

Для такого элемента, предполагая, что он уже настроен на переход, как, например, (с использованием ulоригинального вопроса):

ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}

Мы можем запустить желаемое анимированное «расширение» высоты, используя только CSS, что-то вроде следующего (здесь предполагается, что ulпеременная ссылается на список):

ul.style.height = ul.scrollHeight + "px";

Вот и все. Если вам нужно свернуть список, подойдет любое из двух следующих утверждений:

ul.style.height = "0";
ul.style.removeProperty("height");

Мой конкретный вариант использования вращался вокруг анимации списков неизвестной и часто значительной длины, поэтому мне было неудобно останавливаться на произвольной «достаточно большой» heightили max-heightспецификации и рисковать обрезанным контентом или контентом, который вам вдруг нужно прокрутить (если overflow: auto, например) , Кроме того, ослабление и синхронизация нарушаются с помощью max-heightрешений на основе, потому что используемая высота может достичь своего максимального значения гораздо раньше, чем потребуется для max-heightдостижения 9999px. И с ростом разрешения экрана длина пикселей, как будто 9999pxоставляет неприятный вкус во рту. Это частное решение, на мой взгляд, решает проблему элегантно.

Наконец, здесь есть надежда, что будущие пересмотры авторов CSS-адресов должны делать такие вещи еще более элегантно - пересмотреть понятие «вычисленные» против «используемых» и «разрешенных» значений и рассмотреть, должны ли переходы применяться к вычисляемым значения, включая переходы с widthи height(которые в настоящее время получают специальную обработку).

Используйте max-heightс разным переходом замедления и задержки для каждого состояния.

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

Смотрите пример: http://jsfiddle.net/0hnjehjc/1/

Нет жестко закодированных значений.

Нет JavaScript.

Нет приближений.

Хитрость заключается в использовании скрытого и дублированного div чтобы браузер понял, что означает 100%.

Этот метод подходит всякий раз, когда вы можете дублировать DOM элемента, который хотите анимировать.

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}

Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>

Когда я публикую это, уже есть более 30 ответов, но я чувствую, что мой ответ улучшается по уже принятому ответу Джейка.

Я не был удовлетворен проблемой, которая возникает из-за простого использования max-heightи переходов CSS3, так как, как отмечали многие комментаторы, вы должны установить ваше max-heightзначение очень близко к фактической высоте, иначе вы получите задержку. Смотрите это JSFiddle для примера этой проблемы.

Чтобы обойти это (пока еще не используя JavaScript), я добавил еще один элемент HTML, который transform: translateYпереводит значение CSS.

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

Общее преимущество заключается в том, что при переходе обратно (обвале) пользователь сразу видит translateYанимацию, поэтому не имеет значения, сколько времени max-heightзанимает.

Решение как скрипка

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

Итак, я думаю, что придумал очень простой ответ ... нет max-height, использует relativeпозиционирование, работает над liэлементами и является чистым CSS. Я не тестировал ничего, кроме Firefox, хотя, судя по CSS, он должен работать во всех браузерах.

FIDDLE: http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

РЕДАКТИРОВАТЬ: Прокрутите вниз, чтобы получить обновленный ответ.
Я делал выпадающий список и видел этот пост ... много разных ответов, но я тоже решил поделиться своим выпадающим списком, ... Он не идеален, но по крайней мере он будет использовать только css для падать! Я использовал transform: translateY (y) для преобразования списка в представление ...
Вы можете увидеть больше в тесте
http://jsfiddle.net/BVEpc/4/
Я поместил div позади каждого li, потому что мой выпадающий список идет вверх, и чтобы показать их правильно, это было необходимо, мой код div:

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

и зависание это:

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

и потому, что ul ul установлен на содержимое, которое он может получить поверх содержимого вашего тела, поэтому я сделал это для ul:

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

и зависать:

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

второй раз после перехода задерживается, и он будет скрыт после того, как мой выпадающий список был закрыт анимацией ...
Надеюсь, позже кто-нибудь получит выгоду от этого.

РЕДАКТИРОВАТЬ: Я просто не могу поверить, что на самом деле люди используют этот прототип! это выпадающее меню только для одного подменю и все !! Я обновил лучшее, которое может иметь два подменю для направления ltr и rtl с поддержкой IE 8.
Fiddle for LTR
Fiddle for RTL,
надеюсь, кто-то найдет это полезным в будущем.

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

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

Решение Flexbox

Плюсы:

• просто
• нет JS
• плавный переход

Минусы:

• элемент должен быть помещен в гибкий контейнер фиксированной высоты

Он работает так, что всегда имеет flex-based: auto для элемента с содержимым, а вместо этого переходят flex-grow и flex-shrink.

Редактировать: Улучшенный JS Fiddle вдохновлен интерфейсом Xbox One.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
}

<div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div>

JS Fiddle

Расширяя ответ @ jake, переход будет проходить до максимального значения высоты, вызывая очень быструю анимацию - если вы установите переходы для обоих: hover и off, вы можете затем контролировать сумасшедшую скорость немного больше.

Таким образом, li: hover - это когда мышь входит в состояние, а затем переходом свойства non-hovered будет отпуск мыши.

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

например:

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

Вот скрипка: http://jsfiddle.net/BukwJ/

Я думаю, что я нашел действительно твердое решение

ХОРОШО! Я знаю, что эта проблема так же стара, как Интернет, но я думаю, что у меня есть решение, которое я превратил в плагин, называемый мутант-переход . Мое решение устанавливает style=""атрибуты для отслеживаемых элементов всякий раз, когда происходит изменение в DOM. конечный результат заключается в том, что вы можете использовать хороший оле CSS для ваших переходов и не использовать хакерские исправления или специальный javascript. Единственное, что вам нужно сделать, это установить, что вы хотите отслеживать с помощью соответствующего элемента data-mutant-attributes="X".

<div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>

Это оно! Это решение использует MutationObserver для отслеживания изменений в DOM. Из-за этого вам не нужно ничего настраивать или использовать javascript для ручной анимации. Изменения отслеживаются автоматически. Однако, поскольку он использует MutationObserver, он будет переходить только в IE11 +.

Скрипки!

• Демонстрация перехода от height: autoкheight: 100%
• Демонстрация перехода height: autoпри добавлении детей

Вот способ перехода с любой начальной высоты, включая 0, на автоматический (полноразмерный и гибкий), не требующий жесткого набора кода для каждого узла или любого пользовательского кода для инициализации: https://github.com/csuwildcat / переход-авто . Я считаю, что это в основном святой Грааль для того, что вы хотите -> http://codepen.io/csuwldcat/pen/kwsdF . Просто вставьте следующий JS-файл на свою страницу, и все, что вам нужно после этого сделать, это добавить / удалить один логический атрибут reveal=""- из узлов, которые вы хотите расширить и сжать.

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

/*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

Вот блок кода, который нужно включить в вашу страницу, после этого все будет просто:

Перетащите этот файл JS на свою страницу - все это просто работает ™

/ * Код для высоты: авто; переход * /

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/ * Код для ДЕМО * /

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);

Ответ Джейка на анимацию максимальной высоты великолепен, но я обнаружил, что задержка, вызванная установкой большой максимальной высоты, раздражает.

Можно переместить сворачиваемое содержимое во внутренний div и вычислить максимальную высоту, получив высоту внутреннего div (через JQuery это будет externalHeight ()).

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

Вот ссылка на jsfiddle: http://jsfiddle.net/pbatey/duZpT

Вот jsfiddle с минимально необходимым количеством кода: http://jsfiddle.net/8ncjjxh8/

Я понимаю, что эта ветка стареет, но в некоторых поисках Google она занимает высокое место, поэтому я считаю, что ее стоит обновить.

Вы также просто получаете / устанавливаете собственную высоту элемента:

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

Вы должны выбросить этот Javascript сразу после закрывающего тега target_box во встроенном теге скрипта.

Я был в состоянии сделать это. У меня есть .child& .parentdiv. Дочерний элемент отлично вписывается в ширину / высоту родителя с absoluteпозиционированием. Затем я анимирую translateсвойство, чтобы Yуменьшить его значение 100%. Его очень плавная анимация, никаких сбоев и недостатков, как у любого другого решения.

Как то так, псевдокод

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

Вы бы указать heightна .parent, в px, %или оставить как auto. Этот div затем маскирует .childdiv, когда он скользит вниз.

Я опубликовал ответ с некоторым JavaScript и получил отрицательное голосование, поэтому был раздражен и попробовал снова, и взломал его только с помощью CSS!

Это решение использует несколько «техник»:

• padding-bottom:100%«hack», где проценты определены в терминах текущей ширины элемента. Подробнее об этой технике.
• Float Shrink-Wrap, (требующий дополнительного div, чтобы применить взломать float очистки)
• не семантическое использование https://caniuse.com/#feat=css-writing-mode и некоторых преобразований для его отмены (это позволяет использовать хак с отступами выше в вертикальном контексте)

В результате мы получаем эффективный переход с использованием только CSS и единой функции перехода для плавного достижения перехода; Святой Грааль!

Конечно, есть и обратная сторона! Я не могу понять, как контролировать ширину, на которой содержимое обрезается ( overflow:hidden); из-за взлома padding-bottom, ширина и высота тесно связаны между собой. Хотя может быть способ, так что вернемся к нему.

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

body {
  padding: 1em;
}

.trigger {
  font-weight: bold;
}

/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}

.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;

  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}

.inner > div { white-space: nowrap; }

.expander:hover .inner,  /* to keep open when expanded */
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}

<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>Long Content can't be wider than outer height unfortunately</div>
      <div>Last Item</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>

Вот решение, которое я только что использовал в сочетании с jQuery. Это работает для следующей структуры HTML:

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

и функция:

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

Затем вы можете использовать функцию щелчка, чтобы установить и удалить высоту, используя css()

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

Я недавно перешел max-heightна liэлементы, а не упаковку ul.

Смысл заключается в том , что задержка для малого max-heightsгораздо менее заметна (если вообще) по сравнению с большим max-heights, и я также могу установить мое max-heightзначение относительно font-sizeиз , liа не какого - то произвольного огромного числа с помощью emsили rems.

Если у меня размер шрифта 1rem, я установлю max-heightдля него что-то вроде 3rem(для размещения обернутого текста). Вы можете увидеть пример здесь:

http://codepen.io/mindfullsilence/pen/DtzjE

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

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

Это позволяет вам иметь div, который сначала отображает содержимое до 200px высоты, а при наведении его размер становится как минимум таким же высоким, как и все содержимое div. Div не становится 3000px, но 3000px - это предел, который я навязываю. Убедитесь, что у вас есть переход на non: hover, иначе вы можете получить странный рендеринг. Таким образом,: hover наследуется от non: hover.

Переход не работает с px на% или на auto. Вам нужно использовать ту же единицу измерения. Это прекрасно работает для меня. Использование HTML5 делает его идеальным ....

Помните, что всегда есть работа вокруг ...; )

Надеюсь, кто-то найдет это полезным

Решение по максимальной высоте от Джейка хорошо работает, если жестко заданное значение максимальной высоты не намного больше реальной высоты (потому что в противном случае возникают нежелательные задержки и проблемы с синхронизацией). С другой стороны, если жестко закодированное значение случайно не превышает реальную высоту, элемент не откроется полностью.

Следующее решение только для CSS также требует жестко заданного размера, который должен быть больше, чем большинство существующих реальных размеров. Однако это решение также работает, если реальный размер в некоторых ситуациях превышает жестко заданный размер. В этом случае переход может немного подскочить, но он никогда не оставит частично видимый элемент. Таким образом, это решение может также использоваться для неизвестного контента, например, из базы данных, где вы просто знаете, что контент обычно не больше, чем х пикселей, но есть исключения.

Идея состоит в том, чтобы использовать отрицательное значение для margin-bottom (или margin-top для слегка отличающейся анимации) и поместить элемент содержимого в средний элемент с переполнением: hidden. Отрицательное поле элемента содержимого уменьшает высоту среднего элемента.

В следующем коде используется переход на поле margin-bottom от -150px до 0px. Это само по себе работает нормально, если элемент содержимого не превышает 150 пикселей. Кроме того, он использует переход на max-height для среднего элемента от 0px до 100%. Это, наконец, скрывает средний элемент, если элемент содержимого выше 150px. Для максимальной высоты переход используется только для задержки его применения на секунду при закрытии, а не для получения плавного визуального эффекта (и, следовательно, он может работать от 0px до 100%).

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

Значение поля margin должно быть отрицательным и максимально приближенным к реальной высоте элемента содержимого. Если оно (абсолютное значение) больше, то возникают такие же проблемы с задержкой и синхронизацией, как и в решениях с максимальной высотой, которые, однако, могут быть ограничены, если размер в жестком коде не намного больше, чем реальный. Если абсолютное значение для margin-bottom меньше, чем реальная высота, переход немного увеличивается. В любом случае после перехода элемент содержимого либо полностью отображается, либо полностью удаляется.

Для получения дополнительной информации см. Мой пост в блоге http://www.taccgl.org/blog/css_transition_display.html#combined_height

Вы можете сделать это, создав обратную анимацию (свернуть) с помощью clip-path.

#child0 {
    display: none;
}
#parent0:hover #child0 {
    display: block;
    animation: height-animation;
    animation-duration: 200ms;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 200ms;
}
@keyframes height-animation {
    0% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 100%, 0% 100%);
    }
}

<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>
    </div>
</div>

Это не совсем «решение» проблемы, а скорее обходной путь. Я уверен, что он работает только так, как написано с текстом, но его можно изменить для работы с другими элементами.

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

Вот пример: http://codepen.io/overthemike/pen/wzjRKa

По сути, вы устанавливаете размер шрифта в 0 и переводите его вместо высоты, или max-height, или scaleY () и т. Д. В достаточно быстром темпе, чтобы высота трансформировалась в то, что вы хотите. Преобразовать фактическую высоту с помощью CSS в auto в настоящее время невозможно, но преобразование содержимого внутри, следовательно, переход размера шрифта.

• Обратите внимание - в коде есть IS javascript, но его единственная цель - добавлять / удалять классы CSS по клику для аккордеона. Это можно сделать с помощью скрытых переключателей, но я не сосредоточился на этом, только на изменении высоты.