使用带有整页 div 覆盖的 CSS 过渡答案

【问题标题】：Using CSS transitions with full-page div overlay使用带有整页 div 覆盖的 CSS 过渡
【发布时间】：2017-12-23 16:12:09
【问题描述】：

目前，我有一个（希望不是-太-hackish-但肯定温和-如此；见下文）页面，其中“查看更多”链接“揭示”了一个完整的-页面div覆盖：

https://jsfiddle.net/6241cphL/3/

我想加入某种CSS transitions，以便叠加层出现/消失得更多......优雅。有没有办法做到这一点？

在这里发帖之前，我尝试了很多方法：

我尝试添加一个.hidden 和/或.visible 类，我通过Javascript 应用/未应用到#container 和/或#inner（从here 窃取）。
我也试过改写thisfade-in/fade-out模型+thisli-menu例子，都无济于事。

注意：如上所述，这东西几乎可以肯定是骇人听闻的，至少是温和的。对于我的需要，这里使用的一般结构/功能非常好，虽然我确实欢迎一般的建设性反馈（我认为每个人的目标都是变得更好），但我更希望这样的反馈还就如何在我已经实施的框架内实现我正在寻求的结果提出了建议。 :)

【问题讨论】：

(offtpic) 不要使用&gt;&gt;&gt; 来创建箭头。你知道那些在 HTML 中是用来做什么的。改用转义表示 &gt;&gt;&gt;
你说得对，@RokoC.Buljan：我很懒惰。非常感谢！

标签： javascript html css css-transitions

【解决方案1】：

不是设置内联样式，而是添加/删除类名（如opened）然后，您可以使用 CSS 过渡/动画。如果您想在转换结束时添加另一个类名（即closed），请使用transitionend 事件和类似事件，这对于设置一些属性（如display: none）很有用。

【讨论】：

不需要transitionend 和display: none。所有 OP 都需要优雅地（可能会淡入/淡出）覆盖层。（使用visibility、transition 和opacity 都可以实现...所以单独使用 CSS）
感谢您的回复，@Giacomo，请原谅我的提问，但是：您能否告诉我您在 Fiddle 和/或扩展答案中的意思？我充其量只是一个业余设计师，我不能 100% 确定如何将您所说的话与提供的链接（我非常感谢！）演示的内容结合起来。
@RokoC.Buljan：我认为单独使用 CSS 也是可行的。你有什么具体的建议可以应用到我的例子中吗？
请原谅我，@GiacomoCosimato，但您链接的小提琴似乎与我最初链接的小提琴没有任何不同。

【解决方案2】：

切换覆盖类：

var overlay = document.getElementById("overlay");

function toggleOverlay() {
  overlay.classList.toggle("active");
}

#overlay {
  position: fixed;
  left:0; top:0; bottom:0; right:0;
  background: rgba(0,0,0, 0.3);
  transition: 0.5s;
  
  opacity: 0;
  visibility: hidden;
}
#overlay.active {
  opacity: 1;
  visibility: visible;
}

<button onclick="toggleOverlay()">Show overlay</button>

<div id="overlay">
  <button onclick="toggleOverlay()">Close</button>
</div>

【讨论】：

【解决方案3】：

你可以用不同的方式来做。另一种选择

var right_link = document.getElementById('right_link');
var inn = document.getElementById('inner');
var link = document.getElementById('link');

function makeVisible() {
  if (inn.classList.contains('active')) {
    inn.classList.remove('active');
  } else {
    inn.classList.add('active');
  }
}
right_link.addEventListener('click', makeVisible)

#inner {
  border-radius: 100%;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

#inner.active {
  background-color: #888888;
  border-radius: 100%;
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

<span id="right_link">Click me</span>
<div id="inner">
</div>

【讨论】：