Javascript 涉及显示属性时其他属性的硬转换

我想在容器中两个大小不同的元素之间淡入淡出，它们彼此重叠。第一个元素应该淡出，然后调整容器大小，最后另一个元素淡入

以下是相关片段：

var layer1=document.getElementById（“layer1”）；
var layer2=document.getElementById（“layer2”）；
函数switchLayers（）{
layer1.addEventListener（“transitionend”，函数（）{
layer2.classList.add（“fadein”）；
});
layer1.classList.add（“淡出”）；
}

#容器{
位置：相对位置；
背景颜色：黄色；
填充：10px；
溢出：隐藏；
}
.层{
位置：相对位置；
宽度：400px；
}
#第1层{
高度：100px；
浮动：左；
背景颜色：蓝色；
}
#第二层{
高度：150像素；
背景色：红色；
显示：无；
不透明度：0；
}
#第1层：淡出{
不透明度：0；
过渡：不透明度1s缓解；
}
#第二层，法登{
显示：块；
不透明度：1；
过渡：不透明度1s缓解；
}

切换层

尝试使用

可见性

属性而不是

显示

有关

可见性

和

显示

中状态更改的更多信息，请参阅

要转换父级

高度

，必须手动更改

#容器

的

高度

属性。使用

display:block

和

display:none

将永远不会转换父级

参考代码：

var layer1=document.getElementById（“layer1”）；
var layer2=document.getElementById（“layer2”）；
函数switchLayers（）{
layer1.addEventListener（“transitionend”，函数（）{
layer2.classList.add（“fadein”）；
document.getElementById（“容器”）.style.height=“170px”；
});
layer1.classList.add（“淡出”）；
}

#容器{
位置：相对位置；
背景颜色：黄色；
填充：10px；
高度：100px；
溢出：隐藏；
过渡：均为0.5s；
}
.层{
位置：相对位置；
宽度：400px；
}
#第1层{
高度：100px；
浮动：左；
背景颜色：蓝色；
}
#第二层{
高度：150像素；
背景色：红色；
能见度：无；
不透明度：0；
}
#第1层：淡出{
能见度：无；
不透明度：0；
过渡：所有1都放松；
}
#第二层，法登{
能见度：可见；
不透明度：1；
过渡：所有1都放松；
}

切换层

没有直接的方法。过渡不适用于

显示

，也不适用于自动

高度

。因此，

可见性

是一个不错的选择

请注意，因为容器应调整大小为 当前显示的图层，无法使用“可见性”特性（如图所示） 它隐藏了元素，但仍允许它占用空间）

然后，你需要把它破解出来。您可以使用

min height

。为您的

容器提供一个假的
最小高度
，然后在过渡结束后将
层2的
高度
应用于该容器。此外，由于
layer2
上的
display
会阻止转换，因此需要将
display
和
opacity
的类分开，并在这两个类之间使用零超时来分隔它们的应用程序

这里有一个粗略的想法：


var layer1=document.getElementById（“layer1”），
layer2=document.getElementById（“layer2”），
container=document.getElementById（“container”），
h=window.getComputedStyle（layer2.getPropertyValue（“高度”）；
container.addEventListener（“transitionend”，函数（e）{
如果（e.target.id=='layer1'）{
//将第2层高度应用于容器最小高度
container.style.minHeight=h；
}
如果（e.target.id=='container'）{
//首先展示第二层
layer2.classList.add（“show”）；
//然后，一个虚拟的停顿到fadein
setTimeout（函数（）{
layer2.classList.add（“fadein”）；
}, 0);
}
}，假）；
函数switchLayers（）{
layer1.classList.add（“淡出”）；
}
#容器{
位置：相对位置；
背景颜色：黄色；
填充：10px；溢出：隐藏；
最小高度：1px；/*人造最小高度*/
过渡：最小高度1s线性；
}
.layer{位置：相对；宽度：400px；}
#第1层{
高度：100px；浮动：左侧；
背景颜色：蓝色；
过渡：所有1s线性；
}
#第二层{
高度：150px；背景色：红色；
显示：无；不透明度：0；
过渡：不透明度1s线性；
}
#layer1.fadeout{opacity:0；}
#layer2.show{display:block；}/*分开显示*/
#layer2.fadein{opacity:1；}/*分离出不透明度*/
切换层
与那篇文章不同之处的可能重复之处在于，我希望避免
可见性
，以便能够调整容器的大小。我已经编辑了我的问题以概述差异。副本解释了为什么不能转换显示属性；因此，您必须选择一种不同的方法使元素显示/不显示。我不想转换
display
属性（我很清楚，它的转换是从未显示到显示的离散进行的）。虽然设置它显然会破坏所有其他属性的转换，这似乎是一个实现错误，因为我在解释该行为时看不到任何东西；具体来说，它使浏览器不必计算任何其他属性的实际值（“计算值”）。由于没有计算这些值，您也没有合适的起始值来将这些值转换为任何值。尽管这会使容器采用最高层的大小，在短层之后可能会产生巨大的空间。