Javascript 为什么即使div没有高度，translate的转换也会占用空间？

下面是我所说的一个例子

基本上，我想将一个

div

平稳地上下移动，但让另一个

div

同时占用空间并与之过渡，而不必单独将它们全部过渡。我想它们会占据空间，因为这些

div

s没有高度。但我错了

如果你检查空的空间，它没有尺寸，就好像空的空气占据了空间。由于某种原因，其他

div

没有向上移动

const div1=document.querySelector（'.div1'）
函数myFunc（e）{
div1.classList.toggle（'animate'）
}

.div1{
背景：红色；
转化：translateY（-200%）；
转型：转型1秒轻松；
}
.第2分部{
背景：绿色；
}
.第3分部{
背景：蓝色；
}
.制作动画{
转化：translateY（100%）；
}

切换
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

您可以使用边距而不是变换来实现这一点，因为变换只是一种视觉效果，不会改变布局

注意：变换确实会影响视觉渲染，但不会影响效果 影响CSS布局，而不是影响溢出

const div1=document.querySelector（'.div1'）
函数myFunc（e）{
div1.classList.toggle（'animate'）
}

.div1{
背景：红色；
利润上限：-300px；
过渡期：利润率为1；
}
.第2分部{
背景：绿色；
}
.第3分部{
背景：蓝色；
}
.制作动画{
边际上限：0；
}

切换
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

我想这会帮助你得到答案

const div1=document.querySelector（“.main div”）
函数myFunc（e）{
div1.classList.toggle（'animate'）
}

.main div{
转化：translateY（-350%）；
转型：转型1秒轻松；
}
.1分部{
背景：红色；
}
.第2分部{
背景：绿色；
}
.第3分部{
背景：蓝色；
}
.制作动画{
转化：translateY（0%）；
}

切换
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

translate只是一种视觉效果，它不会影响布局您正在为每个div设置动画（基本上是用一个巨大的div包装），我说过我不想这样做。