javascript - 将动画添加到滚动时的 css 更改

Question

我建立了以下页面:

http://jsfiddle.net/czLo0t6n/

Code visible at jsfiddle

滚动时，页眉会降低其高度，文本和 Logo 会更改其位置和大小，就像现在在许多网站上看到的那样。我想在滚动过程中添加动画。我怎样才能做到这一点？我对 JavaScript 的了解很少，但实际上我认为动画已经在那里了。但正如您所见，状态相互跳转，没有视觉上的过渡。

或者也许您可以向我推荐一个比我使用的更好的脚本？

希望有人能帮忙:-)

最佳

日

Answer 1

当切换 .large/.small 类时，您应该对发生变化的元素启用转换

#header header,
#logo, 
#slogan{
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition:all 0.4s;
}

演示在 http://jsfiddle.net/czLo0t6n/2/