firefox moz，网络转换答案

【问题标题】：firefox moz, Web Transitionsfirefox moz，网络转换
【发布时间】：2011-06-03 02:38:51
【问题描述】：

我有以下几点：

.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 中效果不佳。

有什么想法吗？

【问题讨论】：

你能写一个jsFiddle 或JS Bin 来显示问题吗？

标签： html css firefox webkit transitions

【解决方案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;
}

【讨论】：

【解决方案2】：

也许您需要在第一个样式规则中使用left: 0，以便从 0px 过渡到 500px（可以插值）而不是 auto 到 500px（不能插值）。

（此外，您的 -webkit-* 声明和您的 -moz-* 声明之间存在差异，但我认为没有必要。）

【讨论】：