Jquery 奇怪的不透明度转换问题仅在Chrome和特定页面上下文中存在

我有一个带有以下CSS的

元素：

.logo {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in 0s;
    -moz-transition: opacity 0.2s ease-in 0s;
    -ms-transition: opacity 0.2s ease-in 0s;
    -o-transition: opacity 0.2s ease-in 0s;
    transition: opacity 0.2s ease-in 0;
}

我用的是谷歌浏览器，CSS是用SASS和它整洁的网格制作的

我设置了一个航路点功能，当

h1

到达顶部时触发该功能：

$（'h1'）。航路点（功能（方向）{
var徽标=$（“.logo”）；
如果（方向==“向下”）{
css（“不透明度”，1）；
}否则，如果（方向==“向上”）{
logo.css（“不透明度”，0）；
}
});

但不透明度仅在向上滚动时设置动画。问题是，我用类似的元素（SVG徽标、h1标题和一些其他内容）编写了一个应用程序，它工作得很好

我想知道我正在使用的库是否有干扰（除了Bourbon和Neat，只是使用常规jquery和waypoints，以及prism.js进行语法高亮显示）

现在我测试了最新稳定的Firefox和Internet Explorer，原始页面运行良好，因此这是Chrome的一种缺陷，只出现在我整个页面的特定上下文中，而不出现在我发布的JSFIDLE示例中

---

？有什么建议吗？

您意识到CSS中的最后一个

转换

属性没有完成吗？另外，您应该只使用

.fadeTo（）

而不是CSS转换。对不起，这是问题中的一个输入错误，代码没有问题。我可以只使用fadeTo（），但这并不能解决所描述的问题。您是否尝试过添加类而不是更改内联样式？addClass（“不透明”）行中的某个内容和css.logo.opaque{opacity:1；}（这样编写以使其具有更多的特定性）