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

Question

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

Answer 2

看来您只是忘记输入

  height: 0;

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

Answer 3

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

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

Animate div from height: 0px to auto failing on first click

javascript

jquery

html

css

velocity.js