firefox moz，Web Transitions

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（可以插值）而不是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;
}