Question

我有一个ul包含可变宽度的浮动li元素，它们将容器内部环绕成多行。我正在从ul中删除li元素，并希望容器的高度能够进行动画处理以容纳可能删除的行。

如果我从最后一行删除，我会通过将li的高度设置为零来处理它，然后再删除它。

当我从最后一行以外的行中删除一个元素时会出现问题，并且它腾出足够的空间将最后一行中的所有元素拉到上一行。由于我没有移除最后一行中的元素，因此我的高度动画不会做任何事情，导致最后一行空出时ul和容器的高度跳跃。

有没有办法解决这个问题，还是我在这种特殊情况下遇到了这种情况？

For example:

https://jsfiddle.net/d4v5kyty/1/

编辑：我的解决方案发布在下面，这是一个工作小提琴：https://jsfiddle.net/x3qt0m89/1/

Answer 1

如果您不需要从DOM中删除元素，我建议您向LI元素添加transition属性，并通过将它们隐藏在画布上来“删除”它们。 / p>

我创建this jsFiddle的示例如下：

普通的HTML：

<!-- Just to remove the elements on the demo -->
<button class="js_removable">
 Remove last item
</button>

<ul class="transitionable">
  <li class="removable width-1">Content</li>
  <li class="removable width-2">Content</li>
  <li class="removable width-3">Content</li>
  <li class="removable width-4">Content</li>
  <li class="removable width-5">Content</li>
  <li class="removable width-3">Content</li>
  <li class="removable width-2">Content</li>
  <li class="removable width-5">Content</li>
</ul>

CSS将包含具有可变宽度和ul作为其父级的浮动元素：

.transitionable {
  width: 100%;
  background-color: black;
  overflow: hidden;
}

.removable {
  float: left;
  height: 50px;
  border: 1px solid;
  transition: all 0.5s ease-in-out;
}

.removable.hidden { 
  height: 0px;
  /* you can further remove it from the dom with the visibility property, this is just for demo reasons */
}

.width-1 {
  width: 25%;
  background-color: white;
}

/* ... rest of the variables widths */

JS删除元素：

$('.js_removable').click(function () {
    // Select only the not hidden elements .removable:not(.hidden) 
    $('.removable:not(.hidden)').last().addClass('hidden');
    // You can further remove it from DOM if necessary after the animation ends
});

Answer 2

由于你没有提供你的代码，所以很难真正给出一个明确的答案，但从听起来，你只是错过了一些过渡。尝试将转换代码添加到容器和<ul>，看看会发生什么。

Answer 3

我最终使用jQuery解决了这个问题，方法是在页面加载时将内联样式应用于容器，然后在追加从ul中删除计算其高度并将容器设置为{的高度{1}}，如下：

JS：

ul

因为这种情况发生延迟，有时候var container = $('.container'); container.attr('style','height:' + $('.container').css('height') + ';'); var animateContainer = function () { var ulHeight = $(container.find('ul')).css('height'); container.animate({'height': ulHeight}, 250); } $('.js_removable').click(function () { $('.removable:not(.hidden)').first().addClass('hidden'); setTimeout(function(){ animateContainer(); }, 1000) });可能比容器大（如果附加到ul）。我对此没有任何问题，只是将ul添加到容器中以清除效果。

不确定这是否是最好的方法，但它适用于我的目的。

这是一个工作小提琴：https://jsfiddle.net/x3qt0m89/1/

添加/删除浮动<li>的动画<ul>高度不在最后一行

3 个答案: