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

Я сделал переход css с высоты auto на высоту: 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