Fatal编程技术网
  • javascript/
  • Javascript 如何在没有定位的情况下对元素使用CSS转换

Javascript 如何在没有定位的情况下对元素使用CSS转换

javascript jquery html css

Javascript 如何在没有定位的情况下对元素使用CSS转换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下代码： <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

我有以下代码：

<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>
我还尝试了下面的代码，因此我可以让较低的
行
缓慢地更改
top
属性，但情况是它们不是相对的
或
绝对的
，因此它们没有任何
top
属性


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



如果我们不使用任何定位，并且元素按正常流程定位，那么当元素更改其在页面上的位置时，会触发什么属性？
不幸的是，仅CSS无法实现您所需的功能。
转换
属性仅在直接更改元素的属性时适用。在本例中，您删除了一个元素，因此在删除子元素时，代理会更改
#a
div的
高度

相反，您可以使用jQuery的
slideUp（）
方法在删除
.row
之前设置高度转换的动画。试试这个：



$（'#删除行'）。单击（函数（）{
$（'.row:eq（1）'）.slideUp（function（）{
$（this.remove（）；
})
})


#a{边框：1px实心#C00；}
.行{高度：150px；}



删除
一些内容
一些内容
一些内容

eq（n）选择器能否像css中的第n个孩子一样使用？就因为我的例子中的行div不总是3，而且它们可以达到更高的数字，我对代码做了一些小修改，但除此之外，您的解决方案正是我想要的。

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