CSS透明度忽略過渡時間

Question

我的解決辦法： 我改變了display樣式visibility風格，因爲這種解決方案適合我的網頁上最好的。通過谷歌搜索「顯示塊覆蓋動畫」可以找到許多其他解決方案。接受的答案是給了我關鍵詞的那個，所以我可以使用Google。

---

原帖：

Fiddle here

我做了fadeIn和fadeOut功能使用CSS動畫，而不是JQuery的動畫以動畫的不透明度。 點擊圖片應該會彈出淡入，圖片淡出超過300毫秒。 單擊身體的任何位置都會使彈出窗口淡出，圖像在超過300毫秒內褪色。

此刻fadeOut工作，但fadeIn似乎忽略了過渡時間，並立即出現。爲什麼不fadeIn工作？

的JavaScript：

function fadeIn(elem) { 
    elem.css("display", "block"); 
    elem.css("opacity", 1); 
} 

function fadeOut(elem) { 
    elem.css("opacity", 0); 
    setTimeout(function() { 
     elem.css("display", "none"); 
    }, 300); 
} 

$("body").on("click", function(ev) { 
     if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) { 
     fadeIn($("#btn")); 
     fadeOut($("#popup")); 
    } 
}); 

$("#btn").on("click", function(ev) { 
    fadeIn($("#popup")); 
    fadeOut($("#btn")); 
}); 

CSS：

#btn { 
    position: absolute; 
    top: 100px; 
    left: 10px; 
    transition: 0.3s; 
    opacity: 1; 
} 

#popup { 
    position: absolute; 
    background-color: black; 
    display: none; 
    color: red; 
    z-index: 1; 
    padding: 0 1em; 
    transition: 0.3s; 
    opacity: 0; 
} 

---

Answer 1

問題是，當你使用display: block/display: none，以及時取出，它的工作原理

function fadeIn(elem) { 
 
    /* 
 
    elem.css("display", "block"); 
 
    */  
 
    elem.css("opacity", 1); 
 
    } 
 

 
    function fadeOut(elem) { 
 
    elem.css("opacity", 0); 
 
    /* 
 
    setTimeout(function() { 
 
     elem.css("display", "none"); 
 
    }, 1300); 
 
    */ 
 
    } 
 

 
    $("body").on("click", function(ev) { 
 
    if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) { 
 
     fadeIn($("#btn")); 
 
     fadeOut($("#popup")); 
 
    } 
 
    }); 
 

 
    $("#btn").on("click", function(ev) { 
 
    fadeIn($("#popup")); 
 
    fadeOut($("#btn")); 
 
    });

body { 
 
    height: 10vh; 
 
    width: 10vw; 
 
} 
 

 
#btn { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 10px; 
 
    transition: 1.3s; 
 
    opacity: 1; 
 
} 
 

 
#popup { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: red; 
 
    z-index: 1; 
 
    padding: 0 1em; 
 
    transition: 1.3s; 
 
    opacity: 0; 
 
}

<img id="btn" src="http://via.placeholder.com/150x150"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> 
 
<script src="https://new.matt.cat/scipad-app/jquery.hammer.js"></script> 
 
<div id="popup"> 
 
    <p> 
 
    click here to close popup 
 
    </p> 
 
</div>

Answer 2

可能嘗試

transition: opacity 0.3s;

https://www.w3schools.com/css/css3_transitions.asp

function fadeIn(elem) { 
 
    elem.css("display", "block"); 
 
    elem.css("opacity", 1); 
 
    } 
 

 
    function fadeOut(elem) { 
 
    elem.css("opacity", 0); 
 
    setTimeout(function() { 
 
     elem.css("display", "none"); 
 
    }, 300); 
 
    } 
 

 
    $("body").on("click", function(ev) { 
 
    if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) { 
 
     fadeIn($("#btn")); 
 
     fadeOut($("#popup")); 
 
    } 
 
    }); 
 

 
    $("#btn").on("click", function(ev) { 
 
    fadeIn($("#popup")); 
 
    fadeOut($("#btn")); 
 
    });

body { 
 
    height: 10vh; 
 
    width: 10vw; 
 
} 
 

 
#btn { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 10px; 
 
    -webkit-transition: 0.3s; 
 
    transition: 0.3s; 
 
    opacity: 1; 
 
} 
 

 
#popup { 
 
    position: absolute; 
 
    background-color: black; 
 
    display: none; 
 
    color: red; 
 
    z-index: 1; 
 
    padding: 0 1em; 
 
    -webkit-transition: opacity 0.3s; 
 
    transition: opacity 0.3s; 
 
    opacity: 0; 
 
}

<img id="btn" src="http://via.placeholder.com/150x150"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> 
 
<script src="https://new.matt.cat/scipad-app/jquery.hammer.js"></script> 
 
<div id="popup"> 
 
    <p> 
 
    click here to close popup 
 
    </p> 
 
</div>