添加类时的 Firefox 过渡

Question

看看http://gull.calvin-evans.mixture.io/

当您单击其中一个棕色大矩形时，jQuery 会应用一个“dropped”类，它会更改顶部位置。这在最新版本的 FF 中根本不会像在大多数其他浏览器中那样转换，我不知道为什么。当我使用浏览器内调试器并在标记中手动添加类时，它会发生血腥的转换！太奇怪了。如果有人对此有任何想法，将不胜感激。

这是我的 CSS (less) 记录：

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.6s  top 0;
    -moz-transition: 0.6s  top 0;
    -o-transition: 0.6s  top 0;
    -ms-transition: 0.6s  top 0;
    transition: 0.6s  top 0;
    img {
        width: 100%;
    }
    &.one {
        z-index: 4;
        background: @brown1;
        background-size:100% auto;
        top: 0%;
        &.dropped {
            top: 90%;   
        }
    }
    &.two {
        z-index: 3;
        background: @brown2;
        top: 0;
        &.dropped {
            top: 85%;   
        }
    }
    &.three {
        z-index: 2;
        background: @brown3;
        top: 0;
        &.dropped {
            top: 80%;   
        }
    }
}

Answer 1

问题出在您的 JavaScript 应用程序（或 jQuery...）中。

当我手动添加 onclick="this.className += ' dropped'" 时，它可以正常工作，但我不能说脚本中的问题到底出在哪里，因为你有一个缩小的脚本。