Question

我有一段代码片段，当点击一个按钮时，它会逐个删除div。现在这完全正常。

$("button").click(function() {
  var count = 0;
  var int = setInterval(function() {
    if (++count == 11)
      clearInterval(int);
    $('.mydiv').last().remove();
  }, 300);
  $("span").text($('.mydiv').length);
});

目前，当删除div时，包装器的高度会突然移动到它的新高度。我想动画这个，所以它慢慢来。

我添加了以下CSS，希望它能产生预期的效果，但在这种情况下它没有任何效果。

-webkit-transition: height 0.8s;
-moz-transition: height 0.8s;
transition: height 0.8s;

Answer 1

您可以设置初始高度并在删除行后刷新此高度。

https://jsfiddle.net/uu3egrws/12/

    $('.mydiv').last().remove();
    if(count % 5 ==0)
    {
        var newHeight=$(".wrapper").height() - 55;
        $(".wrapper").animate({height: newHeight+"px"});
    }

Answer 2

你可以用Javascript做到这一点;在删除一个元素之前，将当前包装器高度设置为auto，计算其高度并在移除后将其设置为新高度;

$("span").text($('.mydiv').length);
$('.wrapper').css('height', $('.wrapper').height());

$("button").click(function() {
  var count = 0;
  var int = setInterval(function() {
    if (++count == 11) {
      clearInterval(int);
    }
    $('.wrapper').css('height', 'auto');
    $('.mydiv').last().remove();
    $('.wrapper').animate({
      height: $('.wrapper').height()
    }, 300);
  }, 300);
  $("span").text($('.mydiv').length);
});

我也在这里更新你的小提琴; https://jsfiddle.net/uu3egrws/11/

如果你在元素周围使用第二个包装器并将外包装器的高度设置为内包装器的高度，那就更好了;

HTML

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="mydiv"></div>
    ...
    </div>
  </div>
</div>

使用Javascript：

$("span").text($('.mydiv').length);
$('.wrapper').css('height', $('.inner-wrapper').height());

$("button").click(function() {
  var count = 0;
  var int = setInterval(function() {
    if (++count == 11) {
      clearInterval(int);
    }
    $('.mydiv').last().remove();
    $('.wrapper').animate({
      height: $('.inner-wrapper').height()
    }, 300);
  }, 300);
  $("span").text($('.mydiv').length);
});

这里的小提琴; https://jsfiddle.net/uu3egrws/13/

Answer 3

这将是更通用的方式：

$('.mydiv').last().css('opacity', 0).slideUp(100, function(){
    $(this).remove();
});

移除项目时的动画高度

3 个答案:

-jsFiddle-