Javascript 如何使CSS转换影响其他元素的流

在添加和删除元素时，我使用带有

transform

属性的CSS转换来收缩元素

但是，这个属性的一个问题是，它不会影响其他元素的流动，因此看起来好像要删除的元素会收缩，然后其他元素会突然跳转

如果我是动画的高度属性，而不是使用变换，这将是好的，但在实际使用中，我使用的是可变高度的元素，所以我不知道我可以动画之间的高度

---

编辑：人们建议设置

height

属性的动画（如上所述，该属性不起作用），或者设置

max height

属性的动画。

max height

属性将在一定程度上起作用，但是您无法完全对齐计时，因为过渡将持续调整

max height

属性，使其超过图元的实际高度，直到过渡时间结束

这些方法的另一个问题是，它没有使用可以通过

transform

属性实现的平滑动画。对象的变换将平稳进行，但是，随着浏览器以不同方式渲染这些变换，下列元素的移动将结巴

---

下面是一个JSFIDLE，说明了我的意思（尝试添加然后删除元素，并在删除元素时查看跳转）：

var-button=document.querySelector（“按钮”）；
变量框=document.createElement（“div”）；
box.className=“box”；
appendChild（document.createTextNode（“单击以删除”）；
按钮。addEventListener（“单击”，函数（e）{
var new_box=box.cloneNode（真）；
新增文本框。添加文本列表器（“单击”，函数（e）{
this.className=“框删除”；
设置超时（函数（e）{
新的_盒。卸下（）；
}, 1000);
});
this.parentNode.appendChild（新建_框）；
});
按钮{
字号：20pt；
}
.盒子{
字号：20pt；
利润率：10px；
宽度：200px；
填充：10px；
背景：粉红色；
变换：比例（1,1）；
变换原点：左上角；
}
.删除{
变换：缩放（1,0）；
过渡：所有1000毫秒都容易；
}

添加框
您可以在收缩框周围创建一个包装。现在只需缩放红色框，这意味着它仍然使用相同的空间，但它是按比例渲染的。当您最终删除它时，它不再使用该空间，它下面的元素将向上跳跃

如果在每个红色框周围创建一个包装器，则可以控制它占用的空间。
只要改变包装的高度，也要有一个过渡

/* css for a wrapper */
overflow: hidden;
transition: height .2s; /* your time */

因此，不仅要使用过渡缩放红色框，还要将它们放在包装元素中，并更改该元素的高度。
要获得最佳效果，需要修改影响其周围环境的装箱属性。这包括宽度/高度、填充、边距和边框宽度。在下面的示例中，我将相关属性设置为
0
，以获得所需的效果。这包括影响元素垂直间距的所有属性：
高度
，
填充-[top/bottom]
，
边距-[top/bottom]
，以及
边框-[top/bottom]-宽度
都转换为0

我还添加了
框大小：边框框和
溢出：隐藏到框中-您应该看到当这些未设置时会发生什么。我会让你自己了解这些


var-button=document.querySelector（“按钮”）；
变量框=document.createElement（“div”）；
box.className=“box”；
appendChild（document.createTextNode（“单击以删除”）；
按钮。addEventListener（“单击”，函数（e）{
var new_box=box.cloneNode（真）；
新增文本框。添加文本列表器（“单击”，函数（e）{
new_box.style.height=this.offsetHeight+'px'；
window.requestAnimationFrame（函数（）{
新建_box.style.height=0；
new_box.className=“框删除”；
设置超时（函数（e）{
新的_盒。卸下（）；
}, 1000);
});
});
this.parentNode.appendChild（新建_框）；
});
按钮{
字号：20pt；
}
.盒子{
框大小：边框框；
溢出：隐藏；
字号：20pt；
利润率：10px；
宽度：200px；
填充：10px；
边框：5px纯红；
背景：粉红色；
变换：比例（1,1）；
变换原点：左上角；
}
.删除{
身高：0；
填充顶部：0；
填充底部：0；
边际上限：0；
页边距底部：0；
边框顶部宽度：0；
边框底宽：0；
变换：缩放（1,0）；
过渡：所有1000毫秒都容易；
}

添加框

对于布局由CSS框模型控制的元素
transform属性不会影响周围内容的流动
转换后的元素

参考：

您必须使用
max height
属性（）才能获得所需的效果


var-button=document.querySelector（“按钮”）；
变量框=document.createElement（“div”）；
box.className=“box”；
box.appendChild（document.createTextNode("点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除点击删除k要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除单击要删除（单击要删除）；
按钮。addEventListener（“单击”，函数（e）{
var new_box=box.cloneNode（真）；
new_box.style.height=（Math.random（）*（200-30）+30）+“px”；
新增文本框。添加文本列表器（“单击”，函数（e）{
this.className=“框删除”；
设置超时（函数（e）{
新的_盒。卸下（）；
}, 1000);
});
这是我的父母