Я прочитал еще несколько вопросов, но мне еще предстоит найти убедительный пример перехода div с естественной высотой (авто, 100%) на большую высоту (скажем, на 200%), когда пользователь на нее нависает, Любая твердая техника?
Вот моя скрипка: http://jsfiddle.net/ESgna/3
.critic-quotes {
-webkit-transition: max-height 0.3s ease-in-out;
-moz-transition: max-height 0.3s ease-in-out;
-o-transition: max-height 0.3s ease-in-out;
-ms-transition: max-height 0.3s ease-in-out;
transition: max-height 0.3s ease-in-out;
max-height: 100%;
}
.critic-quotes:hover {
max-height: 200%;
}
предварительно
.critic-quotes:hover {
max-height: 200%;
}
Обновить:
.critic-quotes {
-webkit-transition: max-height 0.3s ease-in-out;
-moz-transition: max-height 0.3s ease-in-out;
-o-transition: max-height 0.3s ease-in-out;
-ms-transition: max-height 0.3s ease-in-out;
transition: max-height 0.3s ease-in-out;
max-height: 100%;
}
.critic-quotes:hover{
opacity: 1;
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
div
, есть ли способ сделать этоauto
или100%
?height: 100%
не является свойством, которое рассчитывают браузеры. Браузеры просто вертикально добавляют дополнительные дочерние элементы к родительскому элементу, не указывая точное значение высоты. Это также причина, почему мы не можем сделать столбцы одинаковой высоты, установивheight: 100%;
, Иtransition
требует точного значения для расчета анимации. Поэтомуmax-height
не работает. Тем не менее, мы можем подтолкнуть браузеры, чтобы вычислить точную естественную высоту, явно вызвав JavaScript.