动画div从高度:0px到第一次点击自动失败

Question

我正在尝试将一个块元素从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');
    }
});

Answer 1

试试这样使用slideToggle():

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

Answer 2

你好像忘了输入

  height: 0;

。这使得它在开始时设置为auto。

Answer 3

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