首页列表添加动画效果

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;

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;
 		}
 	}

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;

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')