4

http://gull.calvin-evans.mixture.io/をご覧ください。

大きな茶色の長方形の 1 つをクリックすると、「ドロップ」のクラスが jQuery で適用され、上部の位置が変更されます。これは、最新バージョンの 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%;   
        }
    }
}
4

1 に答える 1

1

問題は JavaScript アプリ (または jQuery...) にあります。

手動で追加するonclick="this.className += ' dropped'"と正しく動作しますが、スクリプトが縮小されているため、スクリプトのどこに問題があるのか​​ わかりません。

于 2013-09-09T10:49:50.083 に答える