我怎样才能实现像jQuery的slideDown一样的向下滑动效果，但只使用CSS？

Posted 2023-03-06

【中文标题】我怎样才能实现像jQuery的slideDown一样的向下滑动效果，但只使用CSS？

【英文标题】：How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?

【发布时间】：2011-12-02 03:02:03

【问题描述】：

CSS3 动画存在问题。它们不支持“自动”高度属性（以及宽度、边距等）。在不知道元素的确切高度的情况下创建 CSS3 向下滑动动画的最佳方法是什么？

这个问题类似于this 一个，但那里接受的答案并没有回答实际问题，因为它们不处理计算您希望滑动的元素高度的问题。

【问题讨论】：

我不确定你是否问完全同样的事情，但看看这个：***.com/questions/5072526/…

@thirtydot，那里的问题没有适当的解决方案。接近自动高度滑动问题的唯一解决方案是使用行高动画，这看起来很糟糕，并且仅与文本兼容。

@thirtydot，另外，那里接受的答案实际上并没有解决问题。

我同意@Ron。您必须计算元素的高度并相应地调整动画。

@Ron：你看到了吗：jsfiddle.net/XUjAH/6

【参考方案1】：

看看这个：http://jsfiddle.net/gion_13/eNR6Q/ 这只是css3动画。在其他浏览器中使用更改/添加浏览器特定的供应商 css 前缀：“-moz”用于 firefox，“-webkit”用于 chrome&safari，“-o”用于 Opera，“-ms”用于 ie

【讨论】：

不是一个好的答案，因为它不处理自动高度。不过谢谢

【参考方案2】：

您可以通过复制元素、将其高度设置为“自动”并询问其高度（以像素为单位）来了解元素的高度。

假设这是您要在其上制作动画的 div：<div id="mydiv" style="height:0px">，使用此代码计算其高度（仅为了简单起见使用 jQuery）：

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

【讨论】：

嘿@dutzi，你为什么需要克隆它？为什么不直接设置自动高度并测量它的高度？

因为某些浏览器可能会在您将其更改回之前尝试将元素呈现在其“新”高度，从而导致它闪烁。不过，您之前可以将其“显示”更改为“无”...

【参考方案3】：

你看过我根据那个答案挖出来的这个演示吗？ 我试过自己写，但似乎没有用。

$('#click-me').click(function() 
  var height = $("#this").height();
  if (height > 0) 
    $('#this').css('height', '0');
   else 
    $("#this").css(
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    );
    var newHeight = $("#this").height();
    $("#this").css(
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    );
    $('#this').css('height', newHeight + 'px');
  
);

#this 
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;


#click-me 
  cursor: pointer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

View on jsFiddle

【讨论】：

我希望有一个更可靠的解决方案，也许像这样的一些 jQuery 插件：github.com/benbarnett/jQuery-Animate-Enhanced

那么，那个插件有什么问题？ slideDown 就是 animate(height: 'toggle');。

这是一封来自 Ben 的邮件，它的作者：嘿 遗憾的是，我不得不编写一个函数来避免加速这些转换，因为它会导致一些奇怪的显示问题。如果你看一下这个函数： _isBoxShortcut() on line 354: github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/… 我很想找到一种让它们工作的方法。如果你想试一试，只需将该函数设置为“返回 false”，然后插件会将所有 slideDown、SlideUp 和 slideToggle 快捷方式转换为 CSS3 动画。

【参考方案4】：

我正在使用这个：

.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')。 如果 100 像素对于您的容器来说太小，请设置不同的最大高度 在元素中使用额外的 CSS 类。 如果你觉得花哨， 尝试使用cubic-bezier(0.17, 0.04, 0.03, 0.94)而不是 ease-out。