Question

我正在尝试通过使子div通过display:none消失来触发父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个150像素的div，因此将#content div的高度设置为300px，然后将该div转换为150px。另外，您还想将隐藏类添加到#content div中，然后使#two不显示任何内容。像这样：

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

借助史蒂夫的回答，我设法找到了解决问题的方法。以下代码段与他的解决方案几乎相同，但是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>

仅使用CSS的父div的动态尺寸动画

2 个答案: