CSS模式覆盖与淡入和淡出？

Question

我想要一个内容叠加层，以在模式打开时将页面内容显示为灰色。我希望叠加层淡入淡出。

我可以：

• 使用JavaScript添加和删除类（React，而非jQuery）
• 运行任何CSS / SASS代码

限制条件：

• div我使用的叠加层始终位于DOM中，不会添加和删除。
• 我不能使用任何JavaScript计时（否setTimeout()），所有计时必须在CSS / SASS中

显然，叠加层在隐藏时无法阻止对内容的点击，因此我不能仅设置动画opacity。

我目前正在使用background-color: rgba(0, 0, 0, 0.5);和transition: background-color 1s ease-in;制作动画，但似乎无法“覆盖”内容的“重叠”和“重叠”（同时也渐入和渐出）。

我试过使用该height属性（设置100%为覆盖打开，0关闭覆盖），但是我认为我只能使用transition: height 0s ease-in 0;一次，不能使用两次（因为淡出时需要为此延迟）。

我怎样才能做到这一点..？

更新资料

要求看看我累了什么：

.overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 10;
  transition: background-color .5s ease-in;
  background-color: rgba(0, 0, 0, 0);
}
.overlay-start-off {
  transition: height 0s ease-in 0;
}
.overlay-start-on {
  transition: height 0s ease-in .5s;
}
.overlay--show {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

使用React组件中的状态来切换类的进/出，这是在您单击以打开/关闭模态后立即发生的。

我苦苦挣扎的一点是使淡出发生，然后从覆盖内容中移除覆盖层。

我知道这段代码行不通！

Answer 1

尝试使用自定义动画功能。例如

.test {
}
.test + label {
  display:none;
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  animation:fadein .5s;
}
.test:checked + label {
  display:block;
  background-color:rgba(0, 0, 0, .5);
}
@keyframes fadein {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}

<input type="checkbox" id="1" class="test">
<label for="1"></label>

Answer 2

我使用：target来获得纯CSS模式的预期结果。

至于覆盖层，我使用一个空的锚标签和z-index堆栈来创建可点击的覆盖层，该覆盖层仅在模式打开时才会显示。单击叠加层将关闭模式。

模态也有一个单独的关闭按钮。

当模式关闭时，它不会干扰主体内容。

淡出部分很简单。您只需要向整个设置添加一个transition属性。

/* essential code */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
  transition: all ease 1s;
}

.closeoverlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display: block;
  z-index: 2;
  position: fixed;
  cursor: pointer;
}

.closebutton {
  color: red;
  text-decoration: none;
  font-size: 30px;
  margin: 0 auto;
  display: table;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
  
}

.modal:target>.closeoverlay {
  display: block;
}

.modal>div {
  width: 300px;
  height: 500px;
  max-width: 75vw;
  max-height: 75vh;
  text-align: center;
  position: relative;
  background: #131418;
  z-index: 3
}

.wrap,
.modal {
  display: flex;
  align-items: center;
  justify-content: center
}

.modal-content {
 overflow-y:auto
}


/*demo fluff */

p {
  color: green;
  font-size: 20px;
  display: block;
}

button {
  margin: 2em 0 0 0;
  cursor: pointer;
}

.closebutton:hover {
  color: white;
  cursor: pointer;
}

.clutter, .modal-content p {
  margin: 2em auto;
  padding: 40px;
  max-width: 100%;
  text-align: justify;
}


.clutter {width: 400px}

<div class="wrap">
  <a href="#M"><button>Open Modal</button></a>
  <div id="M" class="modal">
    <div class="modal-content">
      <a class="closebutton" href="#">&times;</a>
      <p>Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl </p>
    </div>
    <a href="#" class="closeoverlay"></a>
  </div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
  salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
  ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
  Strip steak pork chop sirloin</div>