CSS3在图像上的firefox中设置不透明度动画

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

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

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