使用CSS转换与全页div覆盖层

Question

目前，我有一个页面（希望不会太独特，但肯定有点），其中“查看更多”链接“展开”了一个全屏

叠加层：

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

我想加入一些CSS转换，使叠加层出现/消失更加...优雅。有办法做到这一点吗？

在发布帖子之前，我尝试了很多方法：

• 我尝试添加了一个已应用/未应用于#container和/或#inner的.hidden和/或.visible类，通过Javascript（从此处）窃取。
• 我还尝试调整了此淡入/淡出模型+此示例，都无济于事。

注意：如上所述，这个东西几乎肯定是hackish的，至少是稍微有点的。对于我的需求，这里使用的一般结构/功能是完全可以的，虽然我欢迎一般性的建设性反馈（每个人的目标都是变得更好），但我希望这样的反馈同时提出如何在我已经实施的框架内实现我正在寻求的结果的建议：）

- cstover

---

（离题）不要使用 >>> 创建箭头状。你知道这在 HTML 中是用来做什么的。请使用转义表示 >>> 替代。 - Roko C. Buljan

你说得完全正确，@RokoC.Buljan：我太懒了。非常感谢你！ - cstover

Answer 1

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

- Giacomo Cosimato

---

不需要使用 transitionend 和 display: none。所有 OP 需要的是平滑地（也许是淡入淡出）显示或隐藏浮层。(所有这些都可以通过 visibility, transition 和 opacity 来实现...所以只需使用 CSS 就足够了) - Roko C. Buljan

谢谢您的回复，@Giacomo，不好意思问一下：您是否可以在Fiddle中展示一下您的意思或者提供更详细的答案？我只是一个业余设计师，不太确定如何将您所说的内容与提供的链接（非常感谢！）结合起来。 - cstover

@RokoC.Buljan：我认为只使用CSS也可以实现。你有什么具体的建议可以应用到我的例子吗？ - cstover

抱歉，@GiacomoCosimato，但是您提供的Fiddle似乎与我最初提供的链接没有任何区别。 - cstover

Answer 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>

- Roko C. Buljan

Answer 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>

- Air