工具栏弹出隐藏效果优化

themes/yilia/layout/layout.ejs

@@ -6,7 +6,7 @@
       <%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
       <%- partial('_partial/live2d') %>
     </div>
-    <div class="mid-col" :class="{show:isShow,hide:!isShow}">
+    <div class="mid-col" :class="{show: isShow,hide: isShow!==undefined && !isShow}">
       <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
       <div id="wrapper" class="body-wrap" v-pre>
         <div class="menu-l">

themes/yilia/source-src/css/core/_animation.scss

@@ -255,13 +255,25 @@
 }
 
 @keyframes leftIn {
-  from {transform: translate3d(0, 0, 0);}
+  from {
-  to {transform: translate3d(333px, 0, 0);}
+    transform: translate3d(0, 0, 0);
+    background:$colorBodyBg;
+  }
+  to {
+    transform: translate3d(333px, 0, 0);
+    background: none;
+  }
 }
 
 @keyframes leftOut {
-  from {transform: translate3d(333px, 0, 0);}
+  from {
-  to {transform: translate3d(0, 0, 0);}
+    transform: translate3d(333px, 0, 0);
+    background: none;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    background:$colorBodyBg;
+  }
 }
 
 %anmLeftIn {
@@ -275,13 +287,25 @@
 }
 
 @keyframes smallLeftIn {
-  from {transform: translate3d(0, 0, 0);}
+  from {
-  to {transform: translate3d(300px, 0, 0);}
+    transform: translate3d(0, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(300px, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes smallleftOut {
-  from {transform: translate3d(300px, 0, 0);}
+  from {
-  to {transform: translate3d(0, 0, 0);}
+    transform: translate3d(300px, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 0;
+  }
 }
 
 %anmSmallLeftIn {

themes/yilia/source-src/css/grid.scss

@@ -43,12 +43,11 @@ html, body, #container {
   width: auto;
 	@extend %trans;
 	&.show {
-		background: none;
-		opacity: .9;
 		@extend %anmLeftIn;
 		.article {
       transition: opacity .5s ease-in, background-color .2s ease-in;
       opacity: 0.6;
+      pointer-events: none;
 		}
 	}
 	&.hide {

themes/yilia/source-src/css/tools.scss

@@ -11,12 +11,10 @@
   overflow-scrolling: touch;
   @extend %trans;
   &.show {
-    opacity: 1;
     @extend %anmSmallLeftIn;
   }
   &.hide {
     @extend %anmSmallLeftOut;
-    z-index: 0;
   }
   .tools-nav {
     display: none;

themes/yilia/source-src/js/comment.js

@@ -7,7 +7,7 @@ window.AV = require('leancloud-storage')
  * 但是缺少一些新功能
  */
 // 评论配置
-const commentConfig = require("../config/comment.json")
+const commentConfig = require('../config/comment.json')
 
 import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({default: Valine }) => {
   commentConfig.valine.config.path = window.location.pathname

themes/yilia/source-src/js/main.js

@@ -21,8 +21,23 @@ Util.addLoadEvent(function() {
   }
 })
 
-const commentConfig = require("../config/comment.json")
+const commentConfig = require('../config/comment.json')
 if(window.themeConfig.isPost && commentConfig.valine.enable) {
   // 文章详情页面, 并且启用了评论, 则加载评论相关代码
   import(/* webpackChunkName: "comment" */ './comment')
-}
+}
+
+var hideWaifu = localStorage.getItem('hideWaifu')
+if(!hideWaifu || !eval(hideWaifu)) {
+  import(/* webpackChunkName: "waifu" */ './waifu').then(waifuInit => {
+    waifuInit.default.init()
+  })
+}
+
+// 控制台
+console.log(
+  '\n %c Silence %c https://www.colorfulsweet.site \n',
+  'color:#FFFFFB;background:#ffa628;padding:5px 0;border-radius:.5rem 0 0 .5rem;',
+  'background: #efefef;padding:5px 0;border-radius:0 .5rem .5rem 0;'
+)
+console.log(`页面加载消耗了 ${(Math.round(performance.now()*100)/100/1000).toFixed(2)}s`)

themes/yilia/source-src/js/slider.js

@@ -19,7 +19,7 @@ new Vue({
   el: '#container',
   data: {
     isCtnShow: false,
-    isShow: false,
+    isShow: undefined,
     items: [],
     innerArchive: false,
     friends: false,
@@ -191,6 +191,7 @@ const waifuTools = {
     // 隐藏看板娘
     setTimeout(function() {
       document.querySelector('.waifu').style.display = 'none'
+      localStorage.setItem('hideWaifu', true)
     }, 1300)
   },
   "tools.eye"() {

themes/yilia/source-src/js/waifu.js

@@ -12,19 +12,12 @@ function isSupportWebGL() {
   return webGL && webGL instanceof WebGLRenderingContext
 }
 
-if(!isMobile && isSupportWebGL()) {
+export default {
-  // 加载live2d模型
+  init() {
-  loadlive2d('live2d', 'https://blog-cdn.nos-eastchina1.126.net/live2D/Kesshouban/model.json')
+    if(!isMobile && isSupportWebGL()) {
-  document.querySelector('.waifu').style.display = 'block'
+      // 加载live2d模型
+      loadlive2d('live2d', 'https://blog-cdn.nos-eastchina1.126.net/live2D/Kesshouban/model.json')
+      document.querySelector('.waifu').style.display = 'block'
+    }
+  }
 }
-
-
-// 控制台
-console.log(
-  '\n %c Silence %c https://www.colorfulsweet.site \n',
-  'color:#FFFFFB;background:#ffa628;padding:5px 0;border-radius:.5rem 0 0 .5rem;',
-  'background: #efefef;padding:5px 0;border-radius:0 .5rem .5rem 0;'
-)
-console.log(`页面加载消耗了 ${(Math.round(performance.now()*100)/100/1000).toFixed(2)}s`)
-
-

themes/yilia/webpack.config.js

@@ -18,8 +18,7 @@ module.exports = function(env, argv) {
       main: './source-src/js/main.js',
       slider: './source-src/js/slider.js',
       mobile: ['babel-polyfill', './source-src/js/mobile.js'],
-      viewer: './source-src/js/viewer.js',
+      viewer: './source-src/js/viewer.js'
-      waifu: './source-src/js/waifu.js'
     },
     output: {
       publicPath: '/',