![](/img/trans.png)
[英]How to do a slow CSS transition to opacity = 1, and a fast/immediate transition to opacity = 0?
[英]CSS opacity ignores transition time
我的解決方案:我將display
樣式更改為visibility
樣式,因為此解決方案最適合我的網頁。 通過谷歌搜索“ 顯示塊覆蓋動畫 ”可以找到許多其他解決方案。 可接受的答案是為我提供關鍵字的答案,以便我可以使用Google。
原始帖子:
我制作了fadeIn
和fadeOut
函數,以使用CSS動畫而不是JQuery動畫對不透明度進行動畫處理。 單擊圖像應使彈出窗口淡入,並且圖像淡出300ms。 單擊身體的任何位置都應使彈出窗口淡出並且圖像淡入300ms以上。
目前淡出工作正常,但淡入似乎忽略了過渡時間,並立即出現。 為什么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;
}
問題是當您使用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>
可能嘗試
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.