更改父元素的定位可防止Firefox中的子元素CSS3过渡 [英] Changing parent element's positioning prevents child element CSS3 transition in Firefox

问题描述

在Webkit中，下面的小提琴按预期工作。

在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; // remove this results in #navigation transition working properly in firefox 
 height：auto; 
 border-top：1px solid＃000; 
 width：100％; 
} 
  

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

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

问题是，我试图完成，标题必须固定，并且孩子的padding属性必须转换，所以简单地删除位置：fixed不是一个选项。

想法？ / p>

解决方案

如果你从Firebug / DevTools切换它，转换工作。另一方面：

• 使用 transform：translate（100px）或 position：absolute >


• 使用转换延迟

不起作用。转换事件甚至不会触发：/（ http://jsfiddle.net/JEMN6/25/ ）

似乎FF无法处理同时重绘＃page-navigation 容器（因为 position：fixed 取出文档流）和 #navigation child ，因此transition事件被中止。 p>

正如Alex Morales所说，你可以使用一个动画，但是你需要另一个动画，去除 #fixed class。

通过JavaScript引入最小延迟也是一个选项：

  $（'＃toggle'）。click（'on'，function（）{
 $（'body'）。toggleClass（'fixed'）; 
 
 setTimeout（function（）{
 $（'＃navigation'）。toggleClass（'get-padding'）
}，20）; 
} 
  

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

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

In Webkit, the following fiddle works as expected. That is to say, #navigation's left padding is transitioned properly from 0 to 100px.

In Firefox, the identical code somehow prevents the transition from occuring.

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

my 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%;
}

It seems it is related to the parent element's positioning changing. As noted above, if I remove position: fixed from the parent element, the transition works in Firefox:

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

Problem is, for what I am trying to accomplish, the header must become fixed, AND the child padding property must transition, so simply removing the position: fixed is not an option.

Thoughts?

解决方案

The transition works if you toggle it from Firebug/DevTools. In the other hand:

• Using transform: translate(100px) or position: absolute + left: 100px for the li items or
• Using a transition delay

don't work. The transition event is not even fired :/ ( http://jsfiddle.net/JEMN6/25/ )

It seems that FF can't handle a simultaneous redrawing of the #page-navigation container (since position: fixed takes it out the document flow) and the #navigation child, so the transition event gets aborted.

As Alex Morales suggests, you could use an animation, but you'd need the opposite one to get a transition when removing the #fixed class.

Introducing a minimal delay through JavaScript is also an option:

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

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

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

Not an ideal solution, though.

这篇关于更改父元素的定位可防止Firefox中的子元素CSS3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！