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

Question

我正在寻找一种方法来隐藏另一个面板，部分透明，使用CSS动画但没有成功，直到我意识到我可以通过将过渡应用到其{{1}来逐步缩小它}：

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; } 动画之后发生。

我如何在没有JS的情况下为它们设置动画 - 我在这里使用它只是为了触发动画 - 所以只要height开始缩小并“传递”其包含的元素，它们也会开始消失，就像面板吞下内容然后消失一样。

更新

这是迄今为止使用@hungerstar解决方案后的结果：

height

$( '#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;
}

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>