Question

在Webkit中，以下小提琴按预期工作。也就是说，＃navigation的左边填充从0到100px正常转换。

在Firefox中，相同的代码会以某种方式阻止发生转换。

我的css：

#navigation {
  background: #ccc;
  -webkit-transition: padding-left 0.125s ease;
  -moz-transition: padding-left 0.125s ease;
  transition: padding-left 0.125s ease;
  margin: 0;
  padding-left: 0;
  width: 100%;
}

.fixed #navigation {
  padding-left: 100px;
}

.fixed #page-navigation {
   position: fixed; // removing this results in #navigation transition working properly in firefox
   height: auto;
   border-top: 1px solid #000;
   width: 100%;
}

它似乎与父元素的位置变化有关。如上所述，如果我从父元素中删除position：fixed，则转换在Firefox中起作用：

http://jsfiddle.net/threehz/JEMN6/28/

问题是，对于我想要完成的任务，标题必须固定，并且子填充属性必须转换，因此只需删除position：fixed不是一个选项。

思想？

Answer 1

如果您从Firebug / DevTools切换它，则转换有效。另一方面：

使用transform: translate(100px)或position: absolute + left: 100px作为li项目或
使用转换延迟

不行。转换事件甚至没有被触发：/（http://jsfiddle.net/JEMN6/25/）

似乎FF无法同时重新绘制#page-navigation容器（因为position: fixed将其取出文档流）和#navigation child，因此转换事件会中止

正如亚历克斯·莫拉莱斯建议的那样，你可以使用动画，但在删除#fixed类时你需要相反的动画才能获得转换。

通过JavaScript引入最小延迟也是一种选择：

$('#toggle').click('on', function() {
  $('body').toggleClass('fixed');

  setTimeout(function () {
    $('#navigation').toggleClass('get-padding')
  }, 20);
});

http://jsfiddle.net/JEMN6/26/

不是理想的解决方案。

Answer 2

对我来说这看起来像https://bugzilla.mozilla.org/show_bug.cgi?id=625289：父母正在重建其CSS框，这会丢失孩子的旧计算样式。

更改父元素的位置会阻止Firefox中的子元素CSS3转换

2 个答案: