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

Когда пользователь щелкает элемент, который требует загрузки, добавляется класс slideLeft, который выдвигает div из поля зрения.Это прекрасно работает в webkit (safari, chrome), но не в бета-версии FireFox 4.

Есть идеи, почему это так?

Answer 1

Поместите объявление в элемент, а не в добавленный класс:

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

Answer 2

Возможно, вам нужно left: 0 в первом правиле стиля, чтобы переход был от 0pp до 500px (который можно интерполировать), а не от auto до 500px (который не может).

(Кроме того, существуют различия между вашими -webkit- * декларациями и вашими -moz- * декларациями, но я не думаю, что это должно быть.)