Как я могу добиться эффекта слайда вниз, как jQuery's slideDown, но только с помощью CSS?

Question

Проблема с анимацией CSS3. Они не поддерживают свойство высоты auto (а также ширину, поля и т. Д.). Каков наилучший способ создания анимации скольжения CSS3, не зная точную высоту элемента?

Вопрос похож на этот один, но принятый там ответ не дает ответа на реальный вопрос, потому что он не связан с проблемой вычисления высоты элемента, который вы хотите скользить.

Answer 1

Вы видели эту демонстрацию, которую я выкопал на этом ответе?http://jsfiddle.net/XUjAH/6/

Я пытался написать свой, но, похоже, это не сработало.

Answer 2

Я использую это:

.slide-down {
  transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
  overflow: hidden;
  max-height: 100px; 

  &.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
}

• Вы можете использовать переменную для продолжительности эффекта и замедления, если вы используете LESS или Sass.
• Чтобы вызвать эффект, используйте $('.slide-down').toggleClass('collapsed').
• Если 100px слишком мало для вашего контейнера, установите другую максимальную высоту используя дополнительный класс CSS в элементе.
• Если вы считаете, попробуйте использовать cubic-bezier(0.17, 0.04, 0.03, 0.94) вместо ease-out.

Answer 3

Вы можете узнать высоту элемента, продублировав его, установив его высоту на «auto» и спросив его, какова его высота в пикселях.

Скажите, что это div, на котором вы хотите анимировать: <div id="mydiv" style="height:0px">, используйте этот код, чтобы выяснить его высоту (используя jQuery только для простоты):

var divHeight = $("#mydiv").clone().css("height", "auto").height();

Answer 4

Проверьте это: http://jsfiddle.net/gion_13/eNR6Q/ Это просто анимация CSS3. для использования в других браузерах измените / добавьте префиксы css для конкретного браузера: «-moz» для firefox, «-webkit» для chrome & safari, «-o» для оперы и «-ms» для то есть