CSS过渡淡出而不是在

Question

我试图使该行为如下一个div：

当表单输入是成为关注的焦点，我希望背景成为除其保持明亮的形式黑暗覆盖。当表单失去焦点时，我希望覆盖层消失。

我有这两个工作，但我希望出现和消失的覆盖淡入淡出。我尝试使用转换来实现这一点，它适用于失败焦点部分而不是获得焦点部分;它不会淡入，而只是出现。我不知道为什么。有人可以解释为什么会发生这种情况，还有什么可能是更好的方式去做这件事。

注意：这不适用于Safari，我只关心它现在适用于Chrome。另外，我宁愿不使用JQuery，所以请限制您对原始js的回答。

Here是JSFiddle。

` 

Answer 1

基本上display:none和block不支持过渡，所以你可以使用height为得到它一样。

工作拨弄fiddle

更新CSS部分

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 100vw; 
    opacity: 0.6; 
    transition: all 0.4s linear; /* Add this */ 
    background-color: rgb(0, 0, 0); 
} 

.hidden { 
    height: 0; /* Add this */ 
    display: none; /* remove */ 
} 

#submit-form { 
    position: relative; 
    height: auto; /* Add this */ 
    display: inline-block; 
    background-color: white; 
} 

const form = document.querySelector("#submit-form"); 
 
const formInput = document.querySelector("#submit-input"); 
 
const overlay = document.querySelector("#overlay"); 
 

 
formInput.addEventListener("focus",() => { 
 
    console.log("here"); 
 
    form.classList.add("above-overlay"); 
 
    overlay.classList.remove("hidden"); 
 
    overlay.classList.remove("faded"); 
 
}); 
 

 
formInput.addEventListener("blur",() => { 
 
    overlay.classList.add("faded"); 
 
    form.classList.remove("above-overlay"); 
 
}); 
 

 
// Need to wait till fade out is finished before removing overlay 
 
overlay.addEventListener("transitionend",() => { 
 
    // only in case where we are removing overlay 
 
    if (overlay.classList.contains("faded")) { 
 
    overlay.classList.add("hidden"); 
 
    } 
 
});

#overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    opacity: 0.6; 
 
    transition: all 0.4s linear; 
 
    background-color: rgb(0, 0, 0); 
 
} 
 

 
#overlay.faded { 
 
    opacity: 0; 
 
    transition: all 0.4s linear; 
 
} 
 

 
.above-overlay { 
 
    z-index: 11; 
 
} 
 

 
.hidden { 
 
    height: 0; 
 
} 
 

 
#submit-form { 
 
    position: relative; 
 
    height: auto; 
 
    display: inline-block; 
 
    background-color: white; 
 
}

<section id="overlay" class="hidden faded"></section> 
 

 
<p> 
 
    This is a sample first paragraph. In his autobiography Surely you’re joking, Mr. Feynman, Richard Feynman discusses his “different box of tools”. Among other things, he mentions a tool he picked up from the text Advanced Calculus by Woods, of differentiating 
 
    under the integral sign – “it’s a certain operation... that’s not taught very much in the universities”. It seems some things haven’t changed in the way calculus is taught, since I was never exposed to this trick in classes either. However, I’ve accidentally 
 
    stumbled upon several elegant applications of the maneuver, and thought I’d write a couple of them down. 
 
</p> 
 

 

 
<form id="submit-form"> 
 
    Sample form: 
 
    <input id="submit-input" type="text"> 
 
</form> 
 

 

 
<p> 
 
    An old problem is to extend the factorial function to non-integer arguments. This was resolved by Euler, who discovered two formulas for n! (one an integral, the other an infinite product) which make sense even when n is not an integer. We derive one 
 
    of Euler’s formulas by employing the trick of differentiating under the integral sign. 
 
</p>