Question

目前，我有一个（希望 - 不是 - 太 - hackish - 但肯定 - 温和 - 如此;见下文）页面中有一个＆＃39;看到更多＆＃39;链接＆＃34;揭露＆＃34;整页div叠加层：

我想加入某种CSS transitions，以便叠加层更优雅地显示/消失。有没有办法做到这一点？

在发布此处之前，我尝试了很多方法：

我尝试添加.hidden和/或.visible类，我通过Javascript（here被盗）向#container和/或#inner申请/未应用）。
我也尝试过调整this fade-in / fade-out模型+ this li - 菜单示例，但都无济于事。

注意：如上所述，这件事几乎肯定是hackish，至少是温和的。根据我的需要，这里使用的一般结构/功能非常好，虽然我做欢迎一般的建设性反馈（我认为每个人的目标都是变得更好），我宁愿如果此类反馈还提出了如何实现我在已经实施的框架内寻求结果的建议。：）

Answer 1

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

Answer 2

切换叠加层：

＆＃13;

var overlay = document.getElementById("overlay");

function toggleOverlay() {
  overlay.classList.toggle("active");
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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>

使用带有整页div叠加的CSS过渡

3 个答案: