燈箱過渡

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>