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

这很简单，但过渡：所有似乎都不适用于显示块/无...任何想法？

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>

带过渡的灯箱

3 个答案: