0

我有一个<svg class="logo" ...>带有以下 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 和Bourbon及其 Neat 网格制作的。

h1我已经设置了一个 Waypoints 功能，它在到达顶部时触发：

<script>
$('h1').waypoint(function(direction) {
    var logo = $(".logo");
    if (direction === "down") {
        logo.css("opacity", 1);
    } else if (direction === "up") {
        logo.css("opacity", 0);
    }
});
</script>

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

我想知道我正在使用的某些库是否存在干扰（除了 Bourbon 和 Neat，仅使用常规 jquery 和航点，以及 prism.js 用于语法突出显示）。

现在我测试了最新的稳定版 Firefox 和 Internet Explorer 并且原始页面运行良好，所以这是一种 Chrome 的错误，它只出现在我整个页面的特定上下文中，而不出现在我发布的 jsfiddle 示例中。

有什么建议么？

4

0 回答 0