feat: 过渡动画

README.md

@@ -14,7 +14,7 @@
 - [x] gitalk评论系统（未测试）
 - [x] giscus评论系统（未测试）
 - [ ] 黑夜模式
-- [ ] 更多动画效果
+- [x] 更多动画效果
 - [x] google字体
 - [x] 加载动画
 

_config.yml

@@ -172,15 +172,20 @@ vendor:
     instantsearch: https://unpkg.com/[email protected]/dist/instantsearch.production.min.js
     pace: https://unpkg.com/[email protected]/pace.min.js
     mermaid: https://unpkg.com/[email protected]/dist/mermaid.min.js
+    wow: https://unpkg.com/[email protected]/dist/wow.min.js
   css:
     highlight: https://unpkg.com/[email protected]/index.css
     fancybox: https://unpkg.com/@fancyapps/[email protected]/dist/jquery.fancybox.min.css
     katex: https://unpkg.com/[email protected]/dist/katex.min.css
     waline: https://unpkg.com/@waline/client@v2/dist/waline.css
     gitalk: https://unpkg.com/gitalk/dist/gitalk.css
     fontawesome: https://unpkg.com/@fortawesome/fontawesome-free/css/v4-font-face.min.css
+    animate: https://unpkg.com/[email protected]/css/libs/animate.css
 
 preloader:
   enable: true
   text: 少女祈祷中...
   # text: Loading...
+
+animation:
+  enable: true

layout/_partial/archive.ejs

@@ -43,7 +43,7 @@
     </div>
 <% } %>
 <% if (page.total > 1){ %>
-    <nav id="page-nav">
+    <nav id="page-nav" class="wow fadeInUp">
         <% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;" %>
         <%- paginator({
             prev_text: prev_text,

layout/_partial/footer.ejs

@@ -1,4 +1,4 @@
-<footer id="footer">
+<footer id="footer" class="wow fadeInUp">
     <div style="width: 100%; overflow: hidden"><div class="footer-line"></div></div>
     <div class="outer">
         <div id="footer-info" class="inner">

layout/_partial/head.ejs

@@ -53,4 +53,15 @@
         <%- css(theme.vendor.css.gitalk) %>
     <% } %>
     <%- js(theme.vendor.js.pace)%>
+    <% if (theme.animation.enable){ %>
+        <%- css(theme.vendor.css.animate) %>
+        <%- js(theme.vendor.js.wow)%>
+        <script>
+          new WOW({
+            offset: 0,
+            mobile: true,
+            live: false
+          }).init();
+        </script>
+    <% } %>
 </head>

layout/_partial/post.ejs

@@ -1,5 +1,5 @@
 <% if (even === true){ %>
-    <div class="post-wrap-left">
+    <div class="post-wrap-left wow fadeInUp">
         <% if (post.link){ %>
             <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url"
                target="_blank"></a>
@@ -47,7 +47,7 @@
         </div>
     </div>
 <% } else { %>
-    <div class="post-wrap-right">
+    <div class="post-wrap-right wow fadeInUp">
         <% if (post.link){ %>
             <a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url"
                target="_blank"></a>

layout/_partial/post/nav.ejs

@@ -1,5 +1,5 @@
 <% if (post.prev || post.next){ %>
-    <nav id="article-nav">
+    <nav id="article-nav" class="wow fadeInUp">
         <% if (post.prev){ %>
             <div class="article-nav-link-wrap article-nav-link-left">
                 <% if(post.prev.cover){ %>

layout/_partial/sidebar.ejs

@@ -1,5 +1,5 @@
 <aside id="sidebar">
-    <div class="sidebar-wrap">
+    <div class="sidebar-wrap wow fadeInRight">
         <div class="sidebar-author">
             <img data-src="/avatar/<%= theme.avatar%>" data-sizes="auto" alt="<%= config.author %>" class="lazyload">
             <div class="sidebar-author-name"><%= config.author %></div>

layout/_widget/archive.ejs

@@ -1,5 +1,5 @@
 <% if (site.posts.length){ %>
-    <div class="widget-wrap">
+    <div class="widget-wrap wow fadeInRight">
         <h3 class="widget-title"><%= __('archive_a') %></h3>
         <div class="widget">
             <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>

layout/_widget/category.ejs

@@ -1,5 +1,5 @@
 <% if (site.categories.length){ %>
-    <div class="widget-wrap">
+    <div class="widget-wrap wow fadeInRight">
         <h3 class="widget-title"><%= __('categories') %></h3>
         <div class="widget">
             <%- list_categories({show_count: theme.show_count}) %>

layout/_widget/recent_posts.ejs

@@ -1,5 +1,5 @@
 <% if (site.posts.length){ %>
-    <div class="widget-wrap">
+    <div class="widget-wrap wow fadeInRight">
         <h3 class="widget-title"><%= __('recent_posts') %></h3>
         <div class="widget">
             <ul>

layout/_widget/tag.ejs

@@ -1,5 +1,5 @@
 <% if (site.tags.length){ %>
-    <div class="widget-wrap">
+    <div class="widget-wrap wow fadeInRight">
         <h3 class="widget-title"><%= __('tags') %></h3>
         <div class="widget">
             <%- list_tags({show_count: theme.show_count}) %>

layout/_widget/tagcloud.ejs

@@ -1,5 +1,5 @@
 <% if (site.tags.length){ %>
-    <div class="widget-wrap">
+    <div class="widget-wrap wow fadeInRight">
         <h3 class="widget-title"><%= __('tagcloud') %></h3>
         <div class="widget tagcloud">
             <%- tagcloud() %>