从高度动画 div：0px 到第一次点击时自动失败答案

【问题标题】：Animate div from height: 0px to auto failing on first click从高度动画 div：0px 到第一次点击时自动失败
【发布时间】：2016-07-04 10:52:22
【问题描述】：

我正在尝试将块元素从 0px 设置为 auto。但是，在第一次单击时，它会立即显示在其自动高度。第一次单击后，它可以平滑地动画到可见和不可见。

CSS：

.item .comments {
  display: none;
  overflow: hidden;
  background: #f7f8fb;
  padding: 0 10px;
  margin: 0;
}

JS：

$(document).on('click', '.btn-comment', function(){

    var comments = $(this).closest('.item').find('.comments');

    if (!comments.is(':visible')) {
      comments.show().velocity({
          height: comments.get(0).scrollHeight
      }, 250, function(){
          $(this).height('auto');
      }, 'ease');
    } else {
      comments.velocity({
        height: 0
      }, 250, function(){
        $(this).hide();
      }, 'ease');
    }

});

【问题讨论】：

不是 100% 确定，但 height() 采用像素值，因此 auto 可能不起作用。尝试使用 css() -- api.jquery.com/height
我可能是错的，因为文档说 - 调用 .height(value) 时，该值可以是字符串（数字和单位）或数字。如果只为该值提供了一个数字，则 jQuery 假定一个像素单位。但是，如果提供了字符串，则必须为高度提供有效的 CSS 测量值（例如 100px、50% 或 auto）。请注意，在现代浏览器中，CSS 高度属性不包括填充、边框或边距。
$(this).height('auto'); -- 是你点击的按钮 == 你试过 $(cmets).height('auto');

标签： javascript jquery html css velocity.js

【解决方案1】：

尝试像这样使用slideToggle()：

$(this).closest('.item').find('.comments').slideToggle();

【讨论】：

【解决方案2】：

您好像忘记输入了

  height: 0;

在 CSS 中。这使它在开始时设置为自动。

【讨论】：

【解决方案3】：

我认为在 jQuery 中没有这样的功能，你可以切换点击，所以我为你做了一个，https://jsfiddle.net/moongod101/zobbvm79/我是 JS 新手，我认为你可以把动画给 css，addClass 和removeClass是这个动作的重点

【讨论】：