CSS3 переход на высоту авто идет на высоту 0 первой

У меня есть следующие CSS:CSS3 переход на высоту авто идет на высоту 0 первой

.foo 
{ 
    height:100px; 
    overflow:hidden; 
    -webkit-transition: height 200ms; 
    -moz-transition: height 200ms; 
    -o-transition: height 200ms; 
    transition: height 200ms; 
} 

.foo.open 
{ 
    height:auto; 
}

Когда .foo имеет автоматическую высоту, она будет высотой ~ 550px в зависимости от содержания.

Я добавляю класс open с помощью jQuery, и я ожидал бы увидеть изменение высоты от 100px до ~ 550px в 200 мс с использованием переходов CSS3.

Однако, что именно происходит, это то, что высота изменяется от 100px до 0px, а затем перескакивает до ~ 550 пикселей.

-- See Live Demo --

Если я вместо этого изменить .open, чтобы height:550px затем works fine этого, однако длина содержание будет меняться и поэтому необходимо установить высоту для автоматического, а не фиксированной высоте пикселя.

Почему закрытие div вместо того, чтобы сдвигаться до ~ 550 пикселей, и как я могу решить эту проблему с анимацией?

источник

2013-04-10 Curt

возможно дубликат [CSS высота перехода: 0; to height: auto;] (http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) –

Я не думаю, что вы можете перейти к height: auto; с переходами css. Обходной путь, который не идеален, заключается в том, чтобы вместо этого перейти на max-height и установить его в нечто большее, чем оно когда-либо будет. В зависимости от того, какое значение вы его установите, это повлияет на скорость перехода, но я просто установил его для max-height: 1000px;.

Вот demo, чтобы показать вам, что я имею в виду.

код из демо:

.foo 
{ 
    max-height:100px; 
    overflow:hidden; 
    -webkit-transition: max-height 200ms; 
    -moz-transition: max-height 200ms; 
    -o-transition: max-height 200ms; 
    transition: max-height 200ms; 
} 

.foo.open 
{ 
    max-height:1000px; 
}

Это не элегантное решение, но я надеюсь, что это помогает.

источник

2013-04-10 11:40:03

Спасибо за ваш ответ, это не идеально, так как 'min-height' всегда должен быть чем-то похожим на то, что будет автоматически. В противном случае скорость перехода будет отличаться. Но это все же лучше, чем мое решение. Есть ли у вас какие-либо указания относительно того, почему мы не можем перейти от фиксированной высоты к авто с переходом? – Curt

Нет, не совсем, но проблема с googling. Я нашел этот пост в блоге, у которого есть краткое объяснение - http://blog.alexmaccaw.com/css-transitions –

Существует небольшая ошибка, я уже исправил ее. добавив минимальную высоту: 100 пикселей;

.foo { 

min-height: 100px; 
height: 100px; 
... 

}

Там вы не увидите, что оно вернется к 0px.

источник

2013-04-10 09:48:06

Спасибо за ваш ответ, но это предотвращает переходную анимацию: http: // jsfiddle.net/AbPEx/2/ – Curt

Это не самое изящное решение, но оно обходит проблему автовысоты.

По щелчку кнопки, вычислить высоту DIV будет с автоматической высоты, выполнив:

var openHeight = $foo.addClass("heightauto").height();

Затем удалить этот класс прямо после этого, и применить высоту к DIV в openHeight:

$foo.removeClass("heightauto"); 
$foo.height(openHeight);

heightauto класс также необходимо переопределить CSS3 переходы, так что высота изменяется мгновенно:

.foo.heightauto 
{ 
    height:auto; 
    -webkit-transition:0; 
    -moz-transition:0; 
    -o-transition:0; 
    transition:0; 
}

См Демо: http://jsfiddle.net/AbPEx/4/

Это еще Hacky, хотя, так что если есть более элегантное решение, то я открыт для предложений

источник

2013-04-10 10:32:16 Curt

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

Вот трюк, который я использую: http://jsfiddle.net/g56jwux4/2/ В основном это два измененных DIVs, переводящих в противоположных направлениях. Взгляните на код в jsfiddle, потому что мой английский недостаточно хорош, чтобы четко объяснить это.

HTML часть:

<body> 
    <p>Technicaly this dropdown menu looks like a simple height transition.</p> 
    <p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p> 
    <input type="checkbox" id="menuOpen"></input> 
    <label id="bouton" for="menuOpen"><span>Click on me !</span> 
     <div id="menu"> 
      <div id="masque"> 
       <div class="choix" id="choix1">Choix 1</div> 
       <div class="choix" id="choix2">Choix 2</div> 
       <div class="choix" id="choix3">Choix 3 tr&egrave;s tr&egrave;s long pour voir la taille finale du menu</div> 
       <div class="choix" id="choix4">Choix 4</div> 
       <div class="choix" id="choix5">Choix 5</div> 
       <div class="choix" id="choix6">Choix 6</div> 
      </div> 
     </div> 
    </label> 
</body>

CSS Часть:

body { 
    font-family: sans-serif; 
} 
#menuOpen { 
    display: none; 
} 
#bouton { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 200px; 
    height: 30px; 
    background-color: lightgray; 
    cursor: pointer; 
} 
#bouton > span { 
    color: black; 
    padding: 6px; 
    line-height: 30px; 
} 
#menu { 
    position: absolute; 
    top: 100%; 
    overflow: hidden; 
    min-width: 100%; 
    transition: transform 0.3s linear 0s, visibility 0.3s linear 0s; 
    transform: translateY(-100%); 
    visibility: hidden; 
    color: white; 
} 
#menuOpen:checked + #bouton > #menu { 
    transform: translateY(0%); 
    visibility: visible; 
    transition: transform 0.3s linear 0s, visibility 0s linear 0s; 
} 
#menuOpen:checked + #bouton > #menu > #masque { 
    transform: translateY(0%); 
} 
#masque { 
    position: relative; 
    background-color: gray; 
    transform: translateY(100%); 
    transition: transform 0.3s linear 0s; 
} 
.choix { 
    white-space: nowrap; 
    padding: 3px 6px; 
} 
.choix:hover { 
    background-color: darkgray; 
}

источник

2015-02-06 20:10:52

CSS3 переход на высоту авто идет на высоту 0 первой

ответ

Смежные вопросы