html - firefox moz、ウェブトランジション

Question

私は次のものを持っています：

.ui-dialog-body {
    position: relative; /* Needed for sliding left, right */
    min-height:60px;
    padding: .5em 1em;
}
.ui-dialog-body.slideLeft {
    left:-500px;
    -webkit-transition: left .5s linear;
    -webkit-transition-delay: .2s;
    -moz-transition-property: left;
    -moz-transition-duration: .5s;
}

ユーザーが読み込みが必要な項目をクリックすると、div をビューの外にスライドさせるクラス slideLeft が追加されます。これは Webkit (safari、chrome) ではうまく機能しますが、FireFox 4 ベータ版では機能しません。

それはなぜですか？

Answer 1

left: 0最初のスタイル ルールで、トランジションが auto から 500px (補間できない) ではなく、0px から 500px (補間できる) になるようにする必要があるかもしれません。

(また、-webkit-* 宣言と -moz-* 宣言には違いがありますが、その必要はないと思います。)

Answer 2

追加されたクラスではなく、要素に宣言を置きます。

.ui-dialog-body {
    position: relative; /* Needed for sliding left, right */
    min-height:60px;
    padding: .5em 1em;
    -webkit-transition: left .5s linear;
    -moz-transition: left .5s linear;
    -ms-transition: left .5s linear;
    -o-transition: left .5s linear;
    transition: left .5s linear;
}

.ui-dialog-body.slideLeft {
    left:-500px;
}