javascript - 从高度 : 0px to auto failing on first click 开始动画 div

Question

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

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');
    }

});

Answer 1

尝试像这样使用 slideToggle():

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