最近特别喜欢某些博客的渐变加载效果,于是就照着制作了一个,感觉还可以。

渐变效果

首先分析一下本博客模板的页面结构,主要分为三行。

#header 标题栏
#layout 正文内容
#footer 底部信息

主要思路是当页面加载完毕后,根据延迟给相应的位置加上 loaded class属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function ($) {
$(function () {
$('#header').addClass('loaded');
setTimeout(
function () {
$('#layout').addClass('loaded');
}, 300);
setTimeout(
function () {
$('#footer').addClass('loaded');
}, 600);
});
})(jQuery);

然后在css中声明之前的样式为 透明度0,向上偏移20px,加载完成 loaded 的样式为 透明度1,偏移还原

1
2
3
4
5
6
7
8
9
#header, #layout, #footer {
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease;
}
#header.loaded, #layout.loaded, #footer.loaded {
transform: translate3d(0, 0, 0);
opacity: 1;
}

刷新一下就可以看到效果了。

fixed问题

之后在调试post页面的时候,发现右侧 文章目录 位置没有出现在最右面,而是出现在了 #layout 的里面。

在调试了一段时间后发现是 transform css属性的问题,在控制台中去掉该属性后文章目录的行为表现的很正常。查询博文发现这个问题很正常,主要是因为 transform 属性的动画行为会影响 fixed 的定位,使其不再基于 viewport 定位。

在尝试了几个方法后,都没有很好的解决这个问题😞。只好出此下策,将 文章目录 整个弄到与 #header,#layout,#footer 同级,然后在模板里加入判断条件只有是 post 页面才渲染目录部分。也算解决了这个问题了🎉。

参考文献