Высота CSS-контейнера перехода CSS от 100% до 200%

0

Я прочитал еще несколько вопросов, но мне еще предстоит найти убедительный пример перехода 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%;
  }
  • 0
    проблема в том, что я должен установить максимальную высоту div , есть ли способ сделать это auto или 100% ?
  • 0
    Потому что height: 100% не является свойством, которое рассчитывают браузеры. Браузеры просто вертикально добавляют дополнительные дочерние элементы к родительскому элементу, не указывая точное значение высоты. Это также причина, почему мы не можем сделать столбцы одинаковой высоты, установив height: 100%; , И transition требует точного значения для расчета анимации. Поэтому max-height не работает. Тем не менее, мы можем подтолкнуть браузеры, чтобы вычислить точную естественную высоту, явно вызвав JavaScript.
Теги:

1 ответ

1

JSFIDDLE

предварительно

.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);
}
  • 0
    Объяснение о том, «почему предыдущий код не работал?» не плохая идея, не так ли?
  • 0
    Я не хочу все масштабировать, просто увеличьте высоту контейнера.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню