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

Question

我在粘性导航栏中有一张图片，当导航栏固定在页面顶部时，我想淡入。这是应用粘性类之前的 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/

Answer 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);