如何使用CSS实现类似jQuery slideDown的下拉效果？

Question

如何使用CSS实现类似jQuery slideDown的下拉效果？

javascriptjqueryanimationcssslidedown

6

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

这个问题类似于这个，但那里被接受的答案没有回答实际问题，因为它们没有解决计算要滑动的元素高度的问题。

- Ron Reiter

我不确定你是否在询问完全相同的事情，但是请看这个链接：https://dev59.com/yG445IYBdhLWcg3wBl2J - thirtydot

@thirtydot，该问题没有合适的解决方案。唯一接近自动高度滑动问题的解决方案是使用行高动画，但效果不佳，只能兼容文本。 - Ron Reiter

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

我同意@Ron的观点。您需要计算元素的高度并相应地调整动画。 - Barrie Reader

2

@Ron：你看过这个吗：http://jsfiddle.net/XUjAH/6/ - Blender

显示剩余2条评论

4个回答

1

您可以通过复制元素，将其高度设置为“auto”，并询问其像素高度来了解元素的高度。

假设这是您想要进行动画处理的 div：<div id="mydiv" style="height:0px">，使用以下代码来确定其高度（仅使用 jQuery 简化代码）：

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

- dutzi

嘿@dutzi，你为什么需要克隆它？为什么不只是设置自动高度并测量其高度呢？ - Ron Reiter

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

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。

- Nacho Coloma

-1

看这个：http://jsfiddle.net/gion_13/eNR6Q/ 这只是 CSS3 动画，在其他浏览器中使用时，请添加/更改各自的浏览器前缀：" -moz" 适用于 Firefox，" -webkit" 适用于 Chrome&Safari，" -o " 适用于 Opera 和 " -ms" 适用于 IE。

- gion_13

不是一个好的答案，因为它没有涉及自适应高度。谢谢。 - Ron Reiter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blender · Accepted Answer

你看过我在那个答案中找到的演示吗？
我试着写了一个，但好像不起作用。

$('#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