Question

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

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

这是我的CSS（更少）记录：

.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'"时，它可以正常工作，但我无法确定脚本中的确切问题，因为你有一个缩小的脚本。

添加类时Firefox会转换

1 个答案: