Javascript Firefox忽略CSS3转换？

因此，我一直在努力使转换在firefox中正常工作，这就是我目前所拥有的：

index.html：

<button type="button" id="pushButton">Push Me!</button>

<div id="loginBackground" class="login-background">
    <div id="loginBox" class="login-box-inactive">

    </div>
</div>

最后，login.js：

"use strict";

var pushButton = document.getElementById("pushButton");

var loginBackground = document.getElementById("loginBackground");
var loginBox        = document.getElementById("loginBox");

pushButton.onclick = function() {
    loginBackground.style.display = "flex";
    loginBox.className = "login-box-active";
}

window.onclick = function(event) {
     if(event.target == loginBackground) {
         loginBackground.style.display = "none";
         loginBox.className = "login-box-inactive";
     }
}

好了，到目前为止，几乎所有的现代浏览器都标准化了转换标签，那么为什么firefox完全忽略了转换标签呢

谢谢

编辑：

现在，我的CSS文件中包含以下内容：

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;

Chrome很好地发挥了这一点，并显示出应有的效果。Firefox仍然无视它们。我甚至在它们前面加了

-moz-

，但它仍然忽略了它们

编辑2：

按下按钮后，我希望发生以下情况：

1） 用户按

按我按钮

2） 
loginBackground
然后覆盖下面的任何内容（假设按钮不是页面上的唯一内容），使所有内容都不可单击

3） 然后，用户可以选择在
loginBox
中填写表单，或单击
close按钮
或
loginBackground
，两者都有以下结果：

3.1）当用户单击
close按钮
或
loginBackground
时，
loginBox
和
loginBackground
消失，下面的内容可用

这行似乎不正确。

尝试删除最后一个值并将计时函数移动到单独的属性

这行似乎不正确。

尝试删除最后一个值并将计时功能移动到单独的属性。
问题在于这两种浏览器对显示属性的处理方式不同。转换的执行取决于loginBackground的display属性，该属性最初为“display:none”。更改尺寸的框是此分区的子项。现在发生的有趣的事情是：

Firefox正在删除设置了display:none的父级的子级

以下是firefox显示的mdn文档：


这就是为什么当你在firefox上切换显示值时，转换不会发生，因为它被移除并重新插入；从本质上说，它并没有以前的值来开始转换

如果您应用“login box active”类并稍微延迟，那么一切都会按预期开始工作


“严格使用”；
var按钮=document.getElementById（“按钮”）；
var loginBackground=document.getElementById（“loginBackground”）；
var loginBox=document.getElementById（“loginBox”）；
button.onclick=函数（）{
loginBackground.style.display=“flex”；
setTimeout（函数（）{
loginBox.className=“登录框处于活动状态”；
}, 400)
}
window.onclick=函数（事件）{
if（event.target==loginBackground）{
loginBackground.style.display=“无”；
loginBox.className=“登录框不活动”；
}
}
。登录背景{
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
背景：rgba（0,0,0,0.4）；
}
.login框处于非活动状态，.login框处于活动状态{
显示器：flex；
柔性流动：柱状nowrap；
最小宽度：150px；
最小高度：150px；
背景：#fff；
保证金：自动；
盒影：5px 5px 10px rgba（0,0,0,0.4）；
}
。登录框处于活动状态{
最小宽度：350px；
最小高度：350px；
过渡：宽度2s，高度2s，缓进缓出0.5s；
}
推我！

问题在于这两种浏览器处理显示属性的方式不同。转换的执行取决于loginBackground的display属性，该属性最初为“display:none”。更改尺寸的框是此分区的子项。现在发生的有趣的事情是：

Firefox正在删除设置了display:none的父级的子级

以下是firefox显示的mdn文档：

这就是为什么当你在firefox上切换显示值时，转换不会发生，因为它被移除并重新插入；从本质上说，它并没有以前的值来开始转换

如果您应用“login box active”类并稍微延迟，那么一切都会按预期开始工作

“严格使用”；
var按钮=document.getElementById（“按钮”）；
var loginBackground=document.getElementById（“loginBackground”）；
var loginBox=document.getElementById（“loginBox”）；
button.onclick=函数（）{
loginBackground.style.display=“flex”；
setTimeout（函数（）{
loginBox.className=“登录框处于活动状态”；
}, 400)
}
window.onclick=函数（事件）{
if（event.target==loginBackground）{
loginBackground.style.display=“无”；
loginBox.className=“登录框不活动”；
}
}

。登录背景{
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
背景：rgba（0,0,0,0.4）；
}
.login框处于非活动状态，.login框处于活动状态{
显示器：flex；
柔性流动：柱状nowrap；
最小宽度：150px；
最小高度：150px；
背景：#fff；
保证金：自动；
盒影：5px 5px 10px rgba（0,0,0,0.4）；
}
。登录框处于活动状态{
最小宽度：350px；
最小高度：350px；
过渡：宽度2s，高度2s，缓进缓出0.5s；
}

推我！

---

这似乎完全破坏了一切这似乎完全破坏了一切如果是这样的话，那么有没有可能让

loginBackground

元素出现在整个网页的前面，覆盖它而不需要

位置

呢？如果是这样的话，那么有没有可能让

loginBackground

元素出现在整个网页前面并覆盖它，而不需要

位置

？这是我想要的动作！非常感谢。这就是我想要的行动！非常感谢。

transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;

transition: width 2s, height 2s, ease-in-out, 0.5s;