隐藏元素及其内容在透明元素后面

Question

我正在寻找一种方法来将面板隐藏在另一个透明的面板后面，而CSS动画没有成功，直到我意识到我可以通过应用 transition 至其height：

$( '#box' ).on( 'click', function() {
	$( this ).addClass( 'closing' );
});

body {
  margin: 5%;
}
#panel, #box {
  border: 1px solid #000;
  width: 200px;
}
#panel {
  height: 200px;
}
#box {
  height: 50px;
}
  #box.closing {
    height: 0;
    transition: height 3s ease;
  }
.box {
    background: repeating-linear-gradient(45deg, rgba(25, 40, 55, 0.2) 35%, rgba(65, 85, 100, 0.2) 40%, rgba(65, 85, 100, 0.2) 42%, rgba(25, 40, 55, 0.2) 50%, rgba(25, 40, 55, 0.2) 55%, rgba(70, 85, 100, 0.2) 60%, rgba(70, 85, 100, 0.2) 75%, rgba(25, 40, 55, 0.2) 90%);
    background-attachment: fixed;
    background-clip: padding-box;
    border: 1px solid rgba(2, 3, 4, 0.6);
    border-radius: 0.5vw;
    -webkit-box-shadow: 0 0.35vw 1vw rgba(0, 0, 0, 0.75);
            box-shadow: 0 0.35vw 1vw rgba(0, 0, 0, 0.75);
}
.box:before, .box:after {
    content: '';
    top: 0;
    width: 180px;
    z-index: -1;
}
.box:before {
    background-image: radial-gradient(200% 200% at bottom right, rgba(185, 190, 195, 0) 50%, rgba(185, 190, 195, 0.6) 75%);
    border-top-left-radius: 0.5vw;
    left: 0;
}
.box:after {
    background-image: radial-gradient(200% 200% at bottom left, rgba(185, 190, 195, 0) 50%, rgba(185, 190, 195, 0.6) 75%);
    border-top-right-radius: 0.5vw;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel" class="box">
   Lorem ipsum dolor...
</div>
<div id="box" class="box">
  Click me
</div>

但是，正如您在此演示中看到的那样，面板的内容在隐藏后和之后保持可见。

我将过渡扩展到：

#box.closing {
    height: 0;
    visibility: hidden;
    transition: height 3s ease, visibility 3s ease;
}

，尽管现在内容也隐藏起来，但它仍在height动画之后发生。

我如何在没有JS的情况下对它们进行动画 - 我在这里使用它只是为了触发动画的方法 - 因此，一旦height开始减少并"通过"其包含的元素，它们也开始消失，就像如果面板吞没了内容，然后消失。

更新

这是到目前为止使用@hungerstar解决方案后的结果：

$( '#box' ).on( 'click', function() {
	$( this ).addClass( 'closing' );
});

body {
  margin: 5%;
}
#panel, #box {
  border: 1px solid #000;
  width: 200px;
}
#panel {
  height: 200px;
}
#box {
    position: relative;
    height: 50px;
    top: 0;
}
#box.closing {
    z-index: -1;
    top: -52px; /* 50px height + 1px top border + 1px bottom border */
    transition: top 3s ease;
}
.box {
    background: repeating-linear-gradient(45deg, rgba(25, 40, 55, 0.2) 35%, rgba(65, 85, 100, 0.2) 40%, rgba(65, 85, 100, 0.2) 42%, rgba(25, 40, 55, 0.2) 50%, rgba(25, 40, 55, 0.2) 55%, rgba(70, 85, 100, 0.2) 60%, rgba(70, 85, 100, 0.2) 75%, rgba(25, 40, 55, 0.2) 90%);
    background-attachment: fixed;
    background-clip: padding-box;
    border: 1px solid rgba(2, 3, 4, 0.6);
    border-radius: 0.5vw;
    -webkit-box-shadow: 0 0.35vw 1vw rgba(0, 0, 0, 0.75);
            box-shadow: 0 0.35vw 1vw rgba(0, 0, 0, 0.75);
}
.box:before, .box:after {
    content: '';
    top: 0;
    width: 180px;
    z-index: -1;
}
.box:before {
    background-image: radial-gradient(200% 200% at bottom right, rgba(185, 190, 195, 0) 50%, rgba(185, 190, 195, 0.6) 75%);
    border-top-left-radius: 0.5vw;
    left: 0;
}
.box:after {
    background-image: radial-gradient(200% 200% at bottom left, rgba(185, 190, 195, 0) 50%, rgba(185, 190, 195, 0.6) 75%);
    border-top-right-radius: 0.5vw;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel" class="box">
   Lorem ipsum dolor...
</div>
<div id="box" class="box">
  Click me
</div>

Answer 1

更新答案

op要求将边界脱颖而出。

我可能会更改动画的方法，并在第一个框架上和后面对底部框进行动画。

var $box = $( '#box' );
$box.on( 'click', function () {
  $box.addClass( 'closing' );
} );

body {
  margin: 5%;
}
#panel,
#box {
  border: 1px solid #000;
  width: 200px;
}
#panel {
  background-color: red;
  height: 200px;
}
#box {
  position: relative;
  background-color: blue;
  height: 50px;
  top: 0;
}
#box.closing {
  z-index: -1;
  top: -52px; /* 50px height + 1px top border + 1px bottom border */
  transition: top 3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
  Lorem ipsum dolor...
</div>
<div id="box">
  Click me
</div>
<p>
  I'm here so you can see what happens to content after the animation.
</p>

原始答案

使用overflow: hidden;。

var $box = $( '#box' );
$box.on( 'click', function () {
  $box.addClass( 'closing' );
} );

body {
  margin: 5%;
}
#panel,
#box {
  border: 1px solid #000;
  width: 200px;
}
#panel {
  background-color: red;
  height: 200px;
}
#box {
  background-color: blue;
  height: 50px;
}
#box.closing {
  height: 0;
  overflow: hidden;
  transition: height 3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
  Lorem ipsum dolor...
</div>
<div id="box">
  Click me
</div>