javascript - Firefox 忽略 CSS3 转换？

Question

所以我一直在努力让过渡在 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>

global_style.css:

.login-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
}

.login-box-inactive, .login-box-active {
    display: flex;
    flex-flow: column nowrap;
    min-width: 150px;
    min-height: 150px;
    background: #fff;
    margin: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

.login-box-active {
    min-width: 350px;
    min-height: 350px;
    transition: width 2s, height 2s, ease-in-out, 0.5s;
}

最后，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) 用户按下 Press Me! 按钮。

2) loginBackground 然后覆盖下面的任何内容(假设按钮不是页面上唯一的内容)，使其不可点击。

3) 然后，用户可以选择在 loginBox 中填写表单或单击 closeButton 或 loginBackground，这两者都有以下结果:

3.1) 当用户点击 closeButton 或 loginBackground 时，loginBox 和 loginBackground 消失，留下可用的内容.

Answer 1

问题是这两种浏览器处理显示属性的方式不同。转换的执行取决于 loginBackground 的显示属性，该属性最初为“display:none”。改变维度的盒子是这个部门的 child 。现在，正在发生的有趣的事情是:

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

这是 firefox 的 mdn 文档显示的内容:

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

这就是为什么当您在 Firefox 上切换显示值时不会发生转换，因为它有点被删除并重新插入；本质上使它没有以前的值(value)来开始过渡。

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

"use strict";

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

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

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

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

.login-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
}

.login-box-inactive, .login-box-active {
    display: flex;
    flex-flow: column nowrap;
    min-width: 150px;
    min-height: 150px;
    background: #fff;
    margin: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}


.login-box-active {
    min-width: 350px;
    min-height: 350px; 
     transition: width 2s, height 2s, ease-in-out 0.5s;
}

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

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

    </div>
</div>

在 Chrome 的奇怪情况下，它不会删除“display:none”的子项。这就是过渡在其上照常工作的原因。

不过，我建议使用简单的不透明度来实现这种效果，而不是玩弄显示。像这样的东西:

"use strict";

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

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

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

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

.login-background {
    opacity: 0;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity 2s;
}


.login-box-inactive, .login-box-active {
    display: flex;
    flex-flow: column nowrap;
    background: #fff;
    width: 150px;
    height: 150px;
    margin: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    transition: width 2s, height 2s, ease-in-out 0.5s;
}

.login-box-active {
    width: 350px;
    height: 350px;  
}

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

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

    </div>
</div>