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;
}

最后，登录.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";
     }
}

AFAIK，到目前为止，几乎所有现代浏览器都标准化了转换标记，为什么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属性，最初是“display：none”。正在改变维度的框是这个部门的孩子。现在，正在发生的有趣事情是：

Firefox正在删除显示为：none set

的父级的子级

以下是firefox的mdn doc所展示的内容：

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上切换显示值时，转换不会发生，因为它被移除并重新插入;从根本上说它没有先前的价值来开始过渡。

如果您稍微延迟应用“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>

Answer 2

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

这条线似乎不正确尝试删除最后一个值并将计时功能移动到单独的属性。

Firefox无视CSS3过渡？

2 个答案: