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

Question

Я пытаюсь заставить <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>

Answer 1

Установите высоту в автоматический режим и установите максимальную высоту.

Проверено на Chrome v17

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

Answer 2

Я также сделал это с помощью jQuery.В моем случае я хотел увидеть немного другого меню (10px).Так что это работает без Javascript (но без перехода также).

#menu li ul {
        list-style: none;
        height: 10px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        #menu li:hover ul {
            height: 100%;
        }

Это мой js:

//Save the height set in css (10px)
var csshoehe = $("ul li ul").height();

// Open all the menus
$("ul li ul").css("height", "100%");

//Save each height in data-attribute
//then shrink it down again
$.each($("ul li ul"), function(){
    var hoehe = $(this).height();
    $(this).data("hoehe", hoehe);
    $(this).css("height", csshoehe);
});

$("ul li").hover(
    function(){
        var orig = $(this).children("ul").data("hoehe");
        $(this).children("ul").stop(true,false).delay(150).animate({"height": orig});
},  function(){
        $(this).children("ul").stop(true,false).delay(400).animate({"height": csshoehe});
});

Надеюсь, это кому-то поможет:)

Answer 3

Как насчет вместо высоты, вы используете что-то вроде ниже одного

#child0 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
} 

#parent0:hover #child0 {
  visibility: visible;
  opacity: 1;
  position: relative;
}

Отлично работает. Пожалуйста, добавьте префиксы. Надеюсь, это кому-нибудь поможет.

PS: если вам все еще нужна высота от 0 до высоты чего-то черного, вы можете добавить height: 0; к #child0 и затем добавить height: inherit к #parent0:hover #child0. Одновременно вы можете добавить переход по высоте индивидуально или только вам всем.

Answer 4

Пример краткого кода:

.slider ul {
  overflow: hidden;
  -webkit-transition: max-height 3.3s ease;
}

.slider.hide ul {
  max-height: 0px;
}

.slider.show ul {
  max-height: 1000px;
}

Answer 5

это то, что я использовал.

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

Проверьте это.

                            <!doctype html>
                            <html>

                            <head>
                                <style>
                                    /* OVERFLOW HIDDEN */
                                    .overflowHidden{
                                        overflow: hidden;
                                    }

                                    /* HEIGHT */
                                    .transitionHeight{
                                        -webkit-transition: max-height 250ms ease-in-out;
                                        -moz-transition: max-height 250ms ease-in-out;
                                        -o-transition: max-height 250ms ease-in-out;
                                        -ms-transition: max-height 250ms ease-in-out;
                                        transition: max-height 250ms ease-in-out;
                                    }
                                    .heightAnimOff{
                                        height: auto;
                                        max-height: 0px;
                                    }
                                    .heightAnimOn{
                                        height: auto;
                                        max-height: 20000px;
                                    }

                                </style>
                                <script src="jquery_1.8.3.min.js" type="text/javascript"></script>
                                <script type="text/javascript">
                                    (function($){
                                            $.toggleAnimHeight = function(alvo, velha, nova){
                                                if ( $(alvo).attr("data-maxHeight") != null ){
                                                }else{
                                                    var totalH = 0;
                                                    $(alvo).children().each(function(){
                                                        totalH += $(this).height();
                                                    });
                                                    $(alvo).attr("data-maxHeight", totalH)
                                                    $("head").append('<style> .'+nova+'{ max-height: '+totalH+'px; } </style>');
                                                }           
                                                if ( $(alvo).attr("class").indexOf(nova) == -1 ){
                                                    $(alvo).removeClass(velha);
                                                    $(alvo).addClass(nova);
                                                }else {
                                                    $(alvo).removeClass(nova);
                                                    $(alvo).addClass(velha);
                                                }
                                            }
                                    }(jQuery));
                                </script>
                            </head>

                            <body>
                                <div class="animContainer">
                                    <button onmousedown="$.toggleAnimHeight( $('#target1'), 'heightAnimOff', 'heightAnimOn' );">Anim Toggle</button>
                                    <div id="target1" class="overflowHidden heightAnimOff transitionHeight">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id pretium enim, quis faucibus urna. Phasellus blandit nisl eget quam mollis vulputate. Sed pulvinar eros vitae neque volutpat, vitae suscipit urna viverra. Etiam rhoncus purus vitae tortor pulvinar, sed vulputate arcu convallis. Sed porta, mi consectetur convallis semper, odio mauris iaculis purus, non tempor purus augue pharetra lorem. Integer dictum lacus arcu. Vivamus metus lorem, fermentum ac egestas ac, ornare non neque. Aenean ullamcorper adipiscing ante, et mollis orci feugiat et.</p>

                                        <p>Praesent pretium sit amet eros et lacinia. Etiam nec neque ullamcorper, sagittis quam vitae, dictum ipsum. Sed volutpat lorem libero, nec commodo magna posuere rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id erat odio. Sed faucibus sem eu tortor laoreet pulvinar. Praesent pharetra risus eget metus vulputate, eget condimentum leo consequat. Praesent consequat rutrum convallis.</p>

                                        <p>Aenean euismod metus quis libero commodo, tristique cursus odio vestibulum. Donec quis lobortis arcu, eu luctus diam. In eget nisi non mauris commodo elementum. Sed gravida leo consequat, tempus orci eu, facilisis ipsum. Cras interdum sed odio vel tincidunt. Morbi arcu ipsum, ultricies dictum enim quis, varius dignissim massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper, magna eu aliquam luctus, leo purus accumsan massa, at auctor dui dolor eu augue. Maecenas ultrices faucibus ante non mattis.</p>

                                        <p>Pellentesque ut est tortor. Quisque adipiscing ac nisi vel interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis ante sollicitudin vehicula ornare. Quisque sagittis diam nibh, ac imperdiet nibh pulvinar eu. Integer at ipsum a purus tristique porttitor vitae in ante. Sed arcu neque, lacinia eu dolor nec, pellentesque interdum tortor. Morbi ornare aliquet aliquam. Aenean egestas, erat vel tempus mollis, est eros iaculis enim, quis fringilla purus tortor sollicitudin erat. Donec ultrices elit metus, sed iaculis mi dignissim vulputate. Donec adipiscing imperdiet porttitor. Sed ac lacus adipiscing, sagittis sem quis, tincidunt metus. Curabitur vitae augue a dolor scelerisque lobortis ut a nisi.</p>

                                        <p>Quisque sollicitudin diam sit amet dui sollicitudin, ac egestas turpis imperdiet. Nullam id dui at lectus ultrices aliquam. Nam non luctus tortor, vitae elementum elit. Nullam id bibendum orci. Aliquam hendrerit nisi vitae tortor mollis, nec aliquam risus malesuada. In scelerisque nisl arcu, sit amet tincidunt libero consequat pharetra. Quisque aliquam consectetur purus nec sollicitudin. Pellentesque consectetur eleifend tortor in blandit. Pellentesque euismod justo sed lectus congue, ut malesuada diam rhoncus. Nulla id tempor odio. Nulla facilisi. Phasellus lacinia neque in nisi congue aliquet. Aliquam malesuada accumsan mauris eget mattis. Maecenas pellentesque, sem sed ultricies ullamcorper, massa enim consectetur magna, eget sagittis lorem leo vel arcu. Cras ultrices nunc id risus commodo laoreet. Proin nisl nulla, elementum ac libero sed, aliquam mollis massa.</p>
                                    </div>
                                </div>
                            </body>

                            </html>

Answer 6

МАЛЕНЬКИЙ JAVASCRIPT + РЕШЕНИЕ SCSS

Я обычно использую совершенно другую точку зрения и (очень) маленький JavaScript. Дело в том:

• что мы действительно хотим, это изменить высоту

• Высота - это сумма всех элементов списка внутри подменю

• Обычно мы знаем высоту элемента списка, поскольку мы его стилизуем

Таким образом, мое решение применимо к «нормальным» подменю, где имена элементов имеют только 1 строку. В любом случае, с чуть большим количеством js можно разместить даже более 1 имени строки.

По сути, я просто считаю элементы подменю и применяю определенные классы соответственно. Затем передать мяч (ы) CSS. Так, например:

var main_menu = $('.main-menu');
var submenus = $('.main-menu').find('.submenu');
submenus.each(function(index,item){
   var i = $(item);
   i.addClass('has-' + i.find('li').length + '-children');
});

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

<ul class="submenu has-3-children">
   <li></li>
   <li></li>
   <li></li>
</ul>

А наш css вот так:

.submenu{
   //your styles [...]
   height:0;
   overflow:hidden;
   transition: all 200ms ease-in-out; //assume Autoprefixer is used
}

У нас также будут некоторые переменные scss, подобные этим (произвольный пример):

$sub_item_height:30px;
$sub_item_border:2px;

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

//use a number of children reasonably high so it won't be overcomed by real buttons
.main-menu .opened .submenu{
   &.has-1-children{ height:   $sub_item_height*1  + $sub_item_border*1;  }
   &.has-2-children{ height:   $sub_item_height*2  + $sub_item_border*2;  }
   &.has-3-children{ height:   $sub_item_height*3  + $sub_item_border*3;  }
   //and so on....
}

Или, чтобы сократить:

.main-menu .opened .submenu{
   @for $i from 1 through 12{//12 is totally arbitrary
      &.has-#{$i}-children { height: $menu_item_height * $i + $menu_item_border * $i; }
   }
}

В большинстве случаев это подойдет. Надеюсь, это поможет!

Answer 7

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

HTML:

<button>Toggle</button>
<div class="container collapsed">
  <div class="content">
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
    <div>Sit</div>
    <div>Amet</div>
  </div>
</div>

CSS:

.container
{
  overflow: hidden;
  transition: 0.5s ease;
}

.container.collapsed
{
  height: 0 !important;
}

Javascript:

$("button").click(
    function ()
    {
        var height = $(".content").height();
        $(".container").css({height: height});
        $(".container").toggleClass("collapsed");
    });

http://jsfiddle.net/r109uz7m/ (включает обходной путь к недостатку, описанному чуть ниже):

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

Answer 8

Если количество «li»> 30 штук, то высота переноса будет> 500px. Мой ответ:

ul{width:100%}
li{height:0;overflow:hidden;background:#dedede;transition:.2s.4s linear}
ul:hover li{height:20px}

<ul>Hover me
<li>Juice</li>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
</ul>

Answer 9

Сегодня я некоторое время смотрел на эту проблему и наткнулся на это решение:

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

$(obj).children().each(function(index, element) {
   InnerHeight += $(this).height();
});

для анимации до полного размера:

$(obj).removeClass('collapsed').css('max-height', InnerHeight);

для анимации до меньшего размера:

$(obj).removeClass('collapsed').css('max-height', MySmallerHeight);

использование CSS3 перехода: max-height;

Таким образом вы избегаете блестящей анимации с большой высоты и не рискуете обрезать свой контент.

Answer 10

Это обычная проблема, которую я решил вот так

http://jsfiddle.net/ipeshev/d1dfr0jz/

Попробуйте установить задержку в закрытом состоянии на некоторое отрицательное число и немного поиграть со значением. Вы увидите разницу. Его можно заставить почти соврать человеческий глаз;).

Он работает в основных браузерах, но достаточно хорош для меня. Странно, но дают некоторые результаты.

.expandable {
    max-height: 0px;
    overflow: hidden;
    transition: all 1s linear -0.8s;
}

button:hover ~ .expandable {
    max-height: 9000px;
    transition: all 1s ease-in-out;
}