CSS преход от автоматична височина към височина 75%

Направих css преход, който е от автоматична височина към височина: 75%.

CSS-преход:

-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

Но не работи в IE и Firefox. Намерих някои публикации в Google, но не можах да намеря решение.

Четири благодаря за вашата помощ.


transition css height
person public9nf    schedule 15.01.2014    source източник
comment
Ако отговорът ми не беше полезен, моля, предоставете повече код или по-добре пример за JSFiddle.   -  person Itay Gal    schedule 15.01.2014

Отговори (3)


arrow_upward
3
arrow_downward

За да работите с % и auto, можете да опитате с min-height така:

div {
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
div:hover {
  min-height:75%;
}

Вижте тази Демо цигулка

Тестван в Chrome 31 -- Firefox 26

person DaniP    schedule 15.01.2014

arrow_upward
2
arrow_downward

Опитайте това: пример за преход

CSS:

.tran{
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    height: 100px;
    background: #e5e5e5;
    height: 100%;
}

.tran:hover{
    height: 300px;
}

HTML:

<div style="height: 200px;">
    <div class="tran">
        Example
    </div>
</div>
person Itay Gal    schedule 15.01.2014
comment
@user2207770 Това отговаря ли на въпроса ви? Ако е така, моля приемете отговора. - person Itay Gal; 28.01.2014

arrow_upward
1
arrow_downward

Лесно, променете от височина на минимална височина или максимална височина, каквото ще е по-добро за вашите нужди.

Пример:Fiddle

person Sven    schedule 15.01.2014