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 beta 中则不然。

有什么想法吗？

Answer 1

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