[design] add page load fade in

Author: zombieFox

gulpfile.js

@@ -75,6 +75,7 @@ const cssFiles = [
 constjsFiles=[
 path.src+'/js/helper.js',
 path.src+'/js/data.js',
+path.src+'/js/ready.js',
 path.src+'/js/fontawesome.js',
 path.src+'/js/update.js',
 path.src+'/js/state.js',

src/css/background.css

@@ -6,7 +6,6 @@
 height:100vh;
 pointer-events: none;
 z-index:var(--z-index-background);
-animation: appear var(--layout-timing-medium) 1;
 display: none;
 }
 

src/css/base.css

@@ -20,6 +20,12 @@ body{
 justify-content: center;
 align-items: center;
 min-height:100vh;
+opacity:0;
+transition: opacity var(--layout-timing-fast);
+}
+
+.is-readybody{
+opacity:1;
 }
 
 html.is-background-color-by-theme,

src/html/script-js.html

@@ -7,6 +7,7 @@
 <!-- nightTab -->
 <scriptsrc="js/helper.js"></script>
 <scriptsrc="js/data.js"></script>
+<scriptsrc="js/ready.js"></script>
 <scriptsrc="js/fontawesome.js"></script>
 <scriptsrc="js/update.js"></script>
 <scriptsrc="js/state.js"></script>

src/js/init.js

@@ -1,5 +1,6 @@
 // log version
 console.log("nightTab version",version.get().number,version.get().name);
+ready.init();
 data.init();
 state.init();
 header.init();

src/js/ready.js

@@ -0,0 +1,36 @@
+varready=(function(){
+
+varbind={};
+
+bind.loaded={
+func: function(){
+render.loaded();
+bind.loaded.remove();
+},
+add: function(){
+window.addEventListener("load",bind.loaded.func,false);
+},
+remove: function(){
+window.removeEventListener("load",bind.loaded.func);
+}
+};
+
+varrender={};
+
+render.loaded=function(){
+varhtml=helper.e("html");
+helper.addClass(html,"is-ready");
+};
+
+varinit=function(){
+bind.loaded.add();
+};
+
+// exposed methods
+return{
+init: init,
+bind: bind,
+render: render
+};
+
+})();