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>