CSS過渡淡出但不淡入

Question

我正在嘗試使div的行為如下：

當表單輸入成為焦點時，我希望背景變成深色覆蓋，但保持明亮的表單除外。 當表單失去焦點時，我希望覆蓋層消失。

我可以同時使用這兩種功能，但是我希望疊加層的出現和消失可以淡入淡出。 我嘗試使用過渡進行此操作，它適用於失去焦點的部分而不適用於獲得焦點的部分； 它不會消失，而只會出現。 我不知道為什么。 有人可以解釋為什么會這樣，還有什么可能是更好的方法。

注意：此功能在Safari上不起作用，我只在意使其立即適用於Chrome。 另外，我寧願不使用JQuery，所以請限制對原始js的回答。

這是一個JSFiddle。

 `

Answer 1

基本上display:none和block不支持過渡，因此您可以使用height使其相同。

工作小提琴

更新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>