仅使用CSS的父div的动态大小动画

Question

我正试图通过display:none使子div消失来触发父div大小转换

我的假设是——创建一个动态居中的div，它也通过使用转换来设置动画我正在寻找一个只支持CSS的解决方案

这是我的方法。

document.querySelector('#one').onclick = function () {
document.querySelector('#two').classList.add("hidden")
}

#content {
transition: all 0.5s ease;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#one, #two {
width: 300px;
height: 150px;
line-height: 150px;
text-align: center;
}
#one {
background-color: cyan;
}
#two {
background-color: magenta;
}
.hidden {
display:none;
}

<div id="content" class="centered">
<div id="one">PRESS ME</div>
<div id="two">TO MAKE ME DISAPPEAR</div>
</div>

编辑：在提供的解决方案中不必是display:none

Answer 1

不能使用display:none进行转换，因为转换没有参考点，但可以使用高度进行转换。此外，您还希望您的转换位于您试图隐藏的元素上。然后父div将收缩，因为元素已不在其中

document.querySelector('#one').onclick = function () {
	document.querySelector('#two').classList.add("hidden")
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
#one, #two {
width: 300px;
height: 150px;
line-height: 150px;
text-align: center;
}
#one {
background-color: cyan;
}
#two {
background-color: magenta;
transition: all 0.5s ease;
}
#two.hidden {
height:0;
overflow:hidden;
}

<div id="content" class="centered">
<div id="one">PRESS ME</div>
<div id="two">TO MAKE ME DISAPPEAR</div>
</div>

如果您需要将父元素设置为需要设置动画的div，那么您将对父div使用高度调整。因此，由于您有2个150px的div，请将#contentdiv的高度设置为300px，然后将该div转换为150px。此外，您还希望将hidden类添加到#contentdiv，然后为#two显示none。像这样：

document.querySelector('#one').onclick = function () {
	document.querySelector('#content').classList.add("hidden")
}

#content {
	transition: all 0.5s ease;
border:5px solid #000;
height:300px;
}
.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
#one, #two {
width: 300px;
height: 150px;
line-height: 150px;
text-align: center;
}
#one {
background-color: cyan;
}
#two {
background-color: magenta;
}
#content.hidden {
height:150px;
overflow:hidden;
}
#content.hidden #two{
display:none;
}

<div id="content" class="centered">
<div id="one">PRESS ME</div>
<div id="two">TO MAKE ME DISAPPEAR</div>
</div>

Answer 2

多亏了Steve的回答，我终于找到了这个问题的解决方案。下面的代码段与他的解决方案几乎相同，但transition被设置为高度，因此opacity: 0立即发生。

这解决了问题，因为高度转换需要一个预先定义的高度(我们为子元素定义了这个高度(，这有助于转换动画。此外，使用opacity: 0使内容不可见会立即创建自动居中父内容的技巧。

document.querySelector('#one').onclick = function () {
	document.querySelector('#two').classList.add("hidden")
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
#one, #two {
width: 300px;
height: 150px;
line-height: 150px;
text-align: center;
}
#one {
background-color: cyan;
}
#two {
background-color: magenta;
transition: height 0.5s ease;
}
#two.hidden {
height:0;
overflow:hidden;
opacity: 0;
}

<div id="content" class="centered">
<div id="one">PRESS ME</div>
<div id="two">TO MAKE ME DISAPPEAR</div>
</div>