如何使用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裏面還有多少吧。現在我刪除中間row與JavaScript和a股利自動改變其高度和更低的row上移。我現在想要的是如何使用Css轉換來使這種改變順利進行。

我想：

#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>