4

在 Webkit 中，以下小提琴按预期工作。也就是说，#navigation 的左内边距从 0 到 100px 正确过渡。

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

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

我的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 不是一个选项。

想法？

4

2 回答 2

3

如果您从 Firebug/DevTools 切换它，转换就会起作用。另一方面：

  • 对 li 项使用transform: translate(100px)or position: absolute+left: 100px
  • 使用转换延迟

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

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

#fixed正如 Alex Morales 建议的那样，您可以使用动画，但在删除课程时您需要相反的动画来获得过渡。

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

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

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

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

不过，这不是一个理想的解决方案。

于 2012-11-16T19:53:30.393 回答
2

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child.

于 2012-11-29T21:08:12.000 回答