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

Question

我试图通过 display:none

使 child div 消失来触发 parent 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，然后给 #content div 一个 300px 的高度，然后将 div 转换为 150px。另外，您可能希望将隐藏的 class 添加到 #content div，然后给 #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

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

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

Dynamic size animation of parent div using CSS only

html

css

css-transitions