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

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

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

6
animation css3 javascript jquery slidedown

4 ответов

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

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

3

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

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

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

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

.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.
1

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

-1