Javascript CSS转换淡出但不进入

我正在尝试制作一个行为如下的div：

当表单输入进入焦点时，我希望背景变成一个黑暗的覆盖层，除了保持明亮的表单。当窗体失去焦点时，我希望覆盖层消失

我有这两个工作，但我想出现和消失的覆盖淡入淡出。我试着用过渡来做这件事，它对失去焦点的部分有效，而不是对获得焦点的部分有效；它不会褪色，而是会出现。我不知道为什么。有人能解释一下为什么会发生这种情况，还有什么更好的方法可以做到这一点

注意：这在Safari上不起作用，我现在只想让它在Chrome上起作用。另外，我不想使用JQuery，所以请将您的答案限制为原始js

这是一个JSFiddle

 `

---

基本上

显示：无

和

块

不支持转换，因此您可以使用

高度

来获得相同的效果

工作小提琴

更新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（“提交表单”）；
const formInput=document.querySelector（“提交输入”）；
const overlay=document.querySelector（“覆盖”）；
formInput.addEventListener（“焦点”，（）=>{
console.log（“此处”）；
表格.classList.add（“上面的覆盖”）；
覆盖.classList.remove（“隐藏”）；
覆盖。类列表。删除（“褪色”）；
});
formInput.addEventListener（“模糊”，（）=>{
叠加。类列表。添加（“褪色”）；
表单.classList.remove（“上面的覆盖”）；
});
//在移除覆盖层之前，需要等待淡出完成
overlay.addEventListener（“transitionend”，（）=>{
//仅在我们移除覆盖的情况下
if（overlay.classList.contains（“褪色”））{
overlay.classList.add（“隐藏”）；
}
});
#覆盖{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
不透明度：0.6；
过渡：所有0.4s线性；
背景色：rgb（0,0,0）；
}
#褪色的{
不透明度：0；
过渡：所有0.4s线性；
}
.覆盖层上方{
z指数：11；
}
.隐藏{
身高：0；
}
#提交表格{
位置：相对位置；
高度：自动；
显示：内联块；
背景色：白色；
}


这是第一段的示例。费曼先生，在他的自传《当然你是在开玩笑》中，理查德·费曼讨论了他的“不同的工具盒”。除此之外，他还提到了一个他从伍兹的《高等微积分》一书中学习到的微分工具
在整型符号下——“这是一种特定的操作……在大学里很少教授”。看起来微积分的教学方式并没有改变，因为我在课堂上也从未接触过这个技巧。然而，我不小心
无意中发现了几种巧妙的手法，我想我应该写下其中的几个。

样本表格：

一个老问题是将阶乘函数扩展到非整数参数。欧拉解决了这个问题，他发现了n的两个公式！（一个是整数，另一个是无穷乘积），即使n不是整数也有意义。我们推导出一个
利用积分符号下的微分技巧，对欧拉公式进行了改进。
谢谢您的功能性回答！一些解释会很好。我猜
display:none
会使动画无效？是的
display
属性不支持过渡效果，因此您可以使用
height
属性来获得它，我也这样做了。你们可以检查答案。啊，有道理。首先，我可以问一下，为什么您将转换从
opacity
更改为
all
，并将转换添加到.flashed css属性。没有这个也行吗？第二，这是一个很好的方法来做我正在尝试做的事情，还是有更好的方法？是的，我改变它，因为我需要在高度和不透明度上进行转换，所以我使用了它。你可以使用
，
来获得相同的效果。就像高度0.4s线性，不透明度0.4s线性一样