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>

CSS过渡淡出但不在

1 个答案: