javascript - 如何在没有定位的情况下对元素使用 CSS 过渡

Question

我有这个代码:

<button id="delete-row">delete</button>

<div id="a">
    <div class="row" style="height:150px;">Some content</div>
    <div class="row" style="height:150px;">Some content</div>
    <div class="row" style="height:150px;">Some content</div>
</div>

a div 的高度取决于其中有多少row div。现在，我用 javascript 删除了中间的 row 并且 a div 自动更改其高度，并且较低的 row 向上移动。我现在想要的是如何使用 Css transitions 使这种变化顺利发生。

我试过了:

#a{
transition-property: height;
transition-duration:0.5s;
}

而且我还尝试了下面的代码，所以我可以让较低的 row 缓慢地更改 top 属性，但情况是它们不是 relative 或 absolute 所以它们没有任何 top 属性。

.row{
   transition-property: top;
   transition-duration:0.5s;
}

如果我们不使用任何定位并且元素由正常流定位，那么当元素改变它们在页面上的位置时会触发什么属性？

Answer 1

不幸的是，单靠 CSS 无法实现您的要求。 transition 属性仅适用于直接更改元素属性的情况。在您的情况下，您删除了一个元素，因此 #a div 的 height 在删除子项时由代理更改。

相反，您可以使用 jQuery 的 slideUp() 方法在移除 .row 之前为高度过渡设置动画。试试这个:

$('#delete-row').click(function() {
  $('.row:eq(1)').slideUp(function() {
    $(this).remove();
  })
})

#a { border: 1px solid #C00; }
.row { height: 150px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-row">delete</button>

<div id="a">
  <div class="row">Some content</div>
  <div class="row">Some content</div>
  <div class="row">Some content</div>
</div>