Firefox中的CSS3动画不透明度在图像上答案

【问题标题】：CSS3 animating opacity in firefox on imageFirefox中的CSS3动画不透明度在图像上
【发布时间】：2013-07-08 22:30:32
【问题描述】：

我在粘性导航栏中有一个图像，我想在导航栏固定到页面顶部时淡入该图像。这是应用粘性类之前的 html。

<nav class="navbar">
  <div class="container">
    <img width="115" height="30" id="logo" alt="Logo" src="navbar_logo.png">
    <ul>
      <li><a href="#intro">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="blog/">Blog</a></li>
      <li><a href="#contact">Contact</a></li>
   </ul>
  </div>
</nav>

一旦导航栏到达页面顶部，唯一的变化是：

<nav class="navbar is-sticky" style="position: fixed; top: 0px;">...</nav>

我使用的 CSS 是：

#logo {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.navbar #logo {
  margin: 5px 20px 0 0;
  vertical-align: top;
  opacity: 0;
}
.navbar.is-sticky  #logo {
  margin: 5px 20px 0 0;
  vertical-align: top;
  opacity: 1;
}

在 Firefox 中，图像只是出现，而在 Chrome 中，它完美地淡入。我完全不知道错误在哪里。

我创建了一个重新创建问题的 JSFiddle：

http://jsfiddle.net/Fnrr6/1/

【问题讨论】：

标签： css google-chrome firefox css-transitions opacity

【解决方案1】：

看起来像一个错误，一个较旧的错误，不幸的是没有得到足够的关注：

https://bugzilla.mozilla.org/show_bug.cgi?id=625289

https://bugzilla.mozilla.org/show_bug.cgi?id=788677

https://bugzilla.mozilla.org/show_bug.cgi?id=800927

https://bugzilla.mozilla.org/show_bug.cgi?id=821976

将position 更改为fixed 或absolute 会终止转换。作为一种解决方法，您可以在添加 is-sticky 类之前使用短暂的超时：

http://jsfiddle.net/fdRBH/

$('.navbar').css({
    position: 'fixed',
    top: 0
});
setTimeout(function() {
    $('.navbar').addClass('is-sticky');
},
60);

【讨论】：