首页列表添加动画效果

2019-08-24 20:52:28 +08:00 · 2019-08-24 20:52:28 +08:00 · 62eb074a57
commit 62eb074a57
parent 7c165816f4
9 changed files with 92 additions and 21 deletions
--- a/themes/yilia/_config.yml
+++ b/themes/yilia/_config.yml
@ -59,6 +59,8 @@ weixin:
 toc: 2
 # 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
 toc_hide_index: true
+# 是否显示文章列表页的动画效果
+animate: true
 # 目录为空时的提示
 toc_empty_wording: 目录，不存在的…

--- a/themes/yilia/layout/_partial/after-footer.ejs
+++ b/themes/yilia/layout/_partial/after-footer.ejs
@ -7,6 +7,7 @@ window.themeConfig = {
  isCategory: <%=is_category()%>, // 是否为分类页面
  pageid: <%-page.pageid ? `"${page.pageid}"` : 'undefined'%>, // 页面标识, 用于个性化页面开发
  toc_hide_index: <%=theme.toc_hide_index%>, // 目录序号
+  animate: <%=theme.animate%>, // 是否显示文章列表页动画效果
  root: '<%=config.root%>', // 资源根路径
  baseUrl: '<%=config.url%>',
  pictureCdn: '<%=config.picture_cdn%>' // 图片存储仓库地址
--- a/themes/yilia/layout/_partial/article.ejs
+++ b/themes/yilia/layout/_partial/article.ejs
@ -1,7 +1,8 @@
 <% if (param.postIndex === 0 || !param.index){ %>
 <%- partial('_partial/aside') %>
 <% } %>
-<article class="article article-type-<%= post.layout %> <%if(param.index){%> article-index<%}%>" itemscope itemprop="blogPost">
+<div class="article-outer">
+<article class="article article-type-<%= post.layout %> <%if(param.index){%>article-index<%}%>" itemscope itemprop="blogPost">
  <div class="article-inner">
    <% if (post.link || post.title){ %>
      <header class="article-header">
@ -86,6 +87,7 @@
    </div>
  </div>
 </article>
+</div>
 <% if (!param.index){ %>
  <%- partial('post/nav') %>
 <% } %>
--- a/themes/yilia/package-lock.json
+++ b/themes/yilia/package-lock.json
@ -4935,6 +4935,19 @@
      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
      "dev": true
    },
+    "is-dom-node": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz",
+      "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA=="
+    },
+    "is-dom-node-list": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
+      "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
+      "requires": {
+        "is-dom-node": "^1.0.4"
+      }
+    },
    "is-extendable": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@ -5629,6 +5642,11 @@
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
    },
+    "miniraf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz",
+      "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ=="
+    },
    "mississippi": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@ -9237,6 +9255,11 @@
      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
      "dev": true
    },
+    "rematrix": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz",
+      "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ=="
+    },
    "remove-trailing-separator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@ -9508,6 +9531,16 @@
        "ajv-keywords": "^3.1.0"
      }
    },
+    "scrollreveal": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.5.tgz",
+      "integrity": "sha512-dyQ0BPOLuoRzKAEwGgVaZsN4mxErHnuzh3Wq0ygE/PteGHeTCOubBoTzxSoix5UGLOUYMDapNAwajfQCB483aw==",
+      "requires": {
+        "miniraf": "1.0.0",
+        "rematrix": "0.3.0",
+        "tealight": "0.3.6"
+      }
+    },
    "scss-tokenizer": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@ -10239,6 +10272,15 @@
        "inherits": "2"
      }
    },
+    "tealight": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz",
+      "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
+      "requires": {
+        "is-dom-node": "^1.0.4",
+        "is-dom-node-list": "^1.2.1"
+      }
+    },
    "terser": {
      "version": "3.17.0",
      "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
--- a/themes/yilia/package.json
+++ b/themes/yilia/package.json
@ -44,6 +44,7 @@
    "badjs-report": "^1.2.2",
    "es6-promise": "^4.0.5",
    "leancloud-storage": "^3.7.3",
-    "qrious": "^4.0.2"
+    "qrious": "^4.0.2",
+    "scrollreveal": "^4.0.5"
  }
 }
--- a/themes/yilia/source-src/css/article-main.scss
+++ b/themes/yilia/source-src/css/article-main.scss
@ -2,23 +2,13 @@
 	position: relative;
 }

-@keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    transform: scale(1);
-  }
-  60% {
-    opacity: 1;
-    transform: scale(1.01);
-  }
-  100% {
-    transform: scale(1);
-  }
+.article-outer {
+  perspective: 500px;
+  margin: 0 30px 30px;
+  position: relative;
 }

 .article {
-  margin: 0 30px 30px;
-  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #fff #ddd;
--- a/themes/yilia/source-src/css/grid.scss
+++ b/themes/yilia/source-src/css/grid.scss
@ -45,10 +45,10 @@ html, body, #container {
  width: auto;
 	@extend %trans;
 	&.show {
-		@extend %anmLeftIn;
+    @extend %anmLeftIn;
 		.article {
-      transition: opacity .5s ease-in, background-color .2s ease-in;
-      opacity: 0.6;
+      transition: opacity .3s ease-in, background-color .3s ease-in;
+      opacity: 0.6 !important;
      pointer-events: none;
 		}
 	}
--- a/themes/yilia/source-src/css/night.scss
+++ b/themes/yilia/source-src/css/night.scss
@ -62,8 +62,19 @@ body.night {
    .article-title { // 主标题
      color: $colorF;
    }
-    .article-entry blockquote{ // 引用
-      background: #2c2c2c;
+    .article-entry {
+      table { // 表格
+        border-color: $borderColor_night;
+        th,td {
+          border-color: $borderColor_night;
+        }
+        thead tr { // 表头
+          background: $mainBg_night;
+        }
+      }
+      blockquote{ // 引用
+        background: #2c2c2c;
+      }
    }
    h1,h2,h3,h4,h5,h6 { // 章节标题
      color: $colorC;
--- a/themes/yilia/source-src/js/main.js
+++ b/themes/yilia/source-src/js/main.js
@ -19,6 +19,28 @@ Util.addLoadEvent(function() {
      PhotoWall.default.init()
    })
  }
+  if(window.themeConfig.animate && window.themeConfig.isHome) {
+    // 文章列表页动画效果
+    let animateTypes = [{ // 右侧移入
+      distance: '50px', 
+      origin: 'right'
+    },{ // 放大
+      scale: 0.8
+    },{ // 缩小
+      scale: 1.2
+    },{ // 绕X轴旋转
+      rotate: { x: 30 }
+    },{ // 绕Y轴旋转
+      rotate: { y: 30 }
+    }]
+    import(/* webpackChunkName: "scrollreveal" */ 'scrollreveal').then(ScrollReveal => {
+      let index = Math.floor(Math.random() * animateTypes.length)
+      ScrollReveal.default().reveal('.article-index', Object.assign({
+        delay: 200,
+        container: document.querySelector('#container')
+      }, animateTypes[index]))
+    })
+  }
 })

 const commentConfig = require('../config/comment.json')