Next个性化配置之归档页添加动画

博客归档页文章列表配置动画,具体效果参照 reuixiy‘s blog

直接进入正题。

首先,确保自己的 motion 配置是否开启:

blog/themes/next/_config.yml
1
2
3
4
5
# Use velocity to animate everything.
motion:
- enable: false
+ enable: true
async: true

reuixiy‘s blog 中的动画特效是 perspectiveLeftIn,因此我们在 motion 对象的最后添加一个和上面格式一样的 post_type 字段,如下:

文件位置:blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
 # Use velocity to animate everything.
motion:
enable: true
async: true
transition:
...
post_block: fadeIn
post_header: fadeIn
post_body: fadeIn
coll_header: fadeIn
# Only for Pisces | Gemini.
sidebar: slideUpIn
+ post_type: perspectiveLeftIn

注意:该处的 post_type 可以为其他内容,但需要与下文中修改内容相对应

接下来编辑文件:

文件位置:blog/themes/next/source/css/_common/components/post/post.styl
1
2
3
4
  if hexo-config('motion.transition.post_header') { .post-header { opacity: 0; } }
if hexo-config('motion.transition.post_body') { .post-body { opacity: 0; } }
if hexo-config('motion.transition.coll_header') { .collection-title { opacity: 0; } }
+ if hexo-config('motion.transition.post_type') { .post-type-normal { opacity: 0; } }

最后一步:

文件位置:blog/themes/next/source/js/src/motion.js
1
2
3
4
5
6
7
8
9
10
11
12
  var $collHeader = $('.collection-title, .archive-year');
var $collHeaderTransition = CONFIG.motion.transition.coll_header;
+ var $postTypeNormal = $('.post-type-normal');
+ var $$postTypeNormalTransition = CONFIG.motion.transition.post_type;
...
...
if (CONFIG.motion.transition.coll_header) {
$collHeader.velocity('transition.' + $collHeaderTransition, postMotionOptions);
}
+ if (CONFIG.motion.transition.post_type) {
+ $postTypeNormal.velocity('transition.' + $$postTypeNormalTransition, postMotionOptions);
+ }

到此为止,归档页面文章列表的动画已添加完毕。此方法亦可拓展到其他列表,这里不再赘述。


0%