带过渡的灯箱

Question

我想做全屏灯箱的平滑过渡，我的实际代码是

<a href="#_" class="lightbox" id="img1">
<img src="images/photo.jpg">
</a>

我的风格：

.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}
.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}
.lightbox:target {
    outline: none;
    display: block;
    transition:all 1s;
}

它真的很简单，但是 transition:all 似乎不适用于显示 block/none...有什么想法吗？

Answer 1

display block/none 不允许任何过渡到运行。

您必须使用 visibility 和 opacity（用于跨浏览器支持）。

因此您的代码将如下所示：

.lightbox {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    transition:all 1s;
}
.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}
.lightbox:target {
    outline: none;
    visibility: visible;
    opacity: 1;
}

Answer 2

如果我没记错的话，transition 不适用于 display。然而，现在还不是放弃希望的时候！有opacity！将 opacity: 0 和 opacity: 1 与 display: none 和 display: block 结合使用。此外，您的 transition 在 .lightbox:target 上，而不是 .lightbox。当它处于 .lightbox:target 时，开始转换为时已晚。

已更正 CSS：

.lightbox {
    display: none;
    opacity: 1;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    transition: opacity 1s;
}
.lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}
.lightbox:target {
    outline: none;
    display: block;
    opacity: 1;
}

Answer 3

你不能转换display因为它没有中间值，它要么显示要么隐藏（当然有很多不同的显示方式）不能显示25%

为了仅使用 css 创建淡入淡出过渡，您需要使用 opacity 属性

function toggle(){
  var element = document.getElementById("element");
  if(element.className==""){
    element.className = "out";
  } else {
    element.className = "";
  }
}

#element{
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 1; 
}

#element.out{
  opacity:0
}

button{z-index: 2; position: relative}

<div id="element">Element</div>

<br />
<button onclick="toggle()">click to fade in/out</button>

带过渡的灯箱

Lightbox with transition

css

transition

lightbox