html - firefox moz, Web Transitions

Question

I have the following:

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

When the user clicks an item which requires loading, the class slideLeft is added which slides the div out of view. This works great in webkit (safari, chrome) but not in FireFox 4 beta.

Any ideas why that is?

Answer 1

也许您需要left: 0在第一个样式规则中，以便过渡是从 0px 到 500px（可以插值）而不是 auto 到 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;
}