javascript - jQuery toggleClass - 不能动画或给它一个过渡

Question

我的代码有一个小问题。我有一个元素，当页面滚动时它会出现。但是，我无法让它以更流畅的方式“出现”。我已经尝试过 CSS 过渡和淡入，但都不起作用。它总是“跳”进来，我无法让它放松。

代码如下:

$(window).on("scroll", function () {
    $('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});

所以它看起来很好，但我不知道如何动画添加类名。

顺便说一句，这是 CSS:

.navbar {
    visibility: hidden;
}

.navbar.visible {
    visibility: visible;
}

Answer 1

visibility 无法使用 CSS 转换动画。

但是你可以这样做:

.navbar {
  opacity: 0;
  transition: opacity .5s ease; // Feel free to use prefixes.
}

.navbar.visible {
  opacity: 1;
}

CSS 过渡/动画无疑是 2014 年动画效果的最佳方式。您应该避免使用 fadeToggle() 和其他 jQuery 动画方法。