fix(plugin): make page rendering faster with animations

includes/specs/plugins.spec.js

@@ -3,6 +3,11 @@ const { doc, type, defaultValue } = require('../common/utils').descriptors;
 module.exports = {
     [type]: 'object',
     [doc]: 'Other plugin settings',
+    animejs: {
+        [type]: 'boolean',
+        [doc]: 'Enable page animations',
+        [defaultValue]: true
+    },
     gallery: {
         [type]: 'boolean',
         [doc]: 'Enable the lightGallery and Justified Gallery plugins (http://ppoffice.github.io/hexo-theme-icarus/2016/07/08/plugin/Gallery/)',
@@ -13,11 +18,6 @@ module.exports = {
         [doc]: 'Enable the Outdated Browser plugin (http://outdatedbrowser.com/)',
         [defaultValue]: true
     },
-    animejs: {
-        [type]: 'boolean',
-        [doc]: 'Enable page animations (http://animejs.com/)',
-        [defaultValue]: true
-    },
     mathjax: {
         [type]: 'boolean',
         [doc]: 'Enable the MathJax plugin (http://ppoffice.github.io/hexo-theme-icarus/2018/01/01/plugin/MathJax/)',

layout/plugin/animejs.ejs

@@ -1,8 +1,7 @@
 <% if (plugin !== false) { %>
     <% if (head) { %>
-    <style>body>.navbar,body>.section,body>.footer{opacity: 0}</style>
+    <style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
     <% } else { %>
-    <%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %>
+    <%- _js('js/animation') %>
-    <%- _js('js/animation', true) %>
     <% } %>
 <% } %>

layout/plugin/mathjax.ejs

@@ -1,9 +1,9 @@
 <% if (!head && plugin !== false) { %>
 <%- _js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML'), true) %>
 <script>
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
     MathJax.Hub.Config({
-        "HTML-CSS": {matchFontHeight: false},
+        'HTML-CSS': {matchFontHeight: false},
         SVG: {matchFontHeight: false},
         CommonHTML: {matchFontHeight: false}
     });

layout/plugin/outdated-browser.ejs

@@ -8,14 +8,14 @@
             my browser now </a></p>
     <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
 </div>
-<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), false, true) %>
+<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), true) %>
 <script>
     document.addEventListener("DOMContentLoaded", function () {
         outdatedBrowser({
             bgColor: '#f25648',
             color: '#ffffff',
             lowerThan: 'flex'
-        })
+        });
     });
 </script>
 <% } %>

source/css/style.styl

@@ -46,7 +46,6 @@ body, button, input, select, textarea
 .card
     overflow: hidden
     border-radius: 4px
-    transform-origin: center top
     box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
     & + .card
         margin-top: 1.5rem

source/js/animation.js

@@ -1,37 +1,37 @@
-function isIE() {
+(function () {
-    var ua = window.navigator.userAgent;
+    function $() {
-    var msie = ua.indexOf('MSIE ');
+        return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
-    var trident = ua.indexOf('Trident/');
+    }
-    return (msie > 0 || trident > 0);
-}
 
-document.addEventListener("DOMContentLoaded", function () {
+    $('body > .navbar, body > .section, body > .footer').forEach(function (element) {
-    var containers = document.querySelectorAll('body>.navbar,body>.section,body>.footer');
+        element.style.transition = '0s';
-    for (var i = 0; i < containers.length; i++) {
+        element.style.opacity = '0';
-        containers[i].style.opacity = '1';
-    }
-    if (!isIE()) {
-        ['.column-main > .card',
-            '.column-left > .card',
-            '.column-right > .card'].map(function (target) {
-                anime({
-                    targets: target,
-                    scale: [0.8, 1],
-                    opacity: [0, 1],
-                    duration: 300,
-                    easing: 'easeOutSine',
-                    delay: function (el, i, l) {
-                        return i * 100;
-                    }
-                })
     });
-
+    document.querySelector('body > .navbar').style.transform = 'translateY(-100px)';
-        anime({
+    ['.column-main > .card', '.column-left > .card', '.column-right > .card'].map(function (selector) {
-            targets: '.navbar-main',
+        $(selector).forEach(function (element) {
-            translateY: [-100, 0],
+            element.style.transition = '0s';
-            opacity: [0, 1],
+            element.style.opacity = '0';
-            duration: 300,
+            element.style.transform = 'scale(0.8)';
-            easing: 'easeOutSine'
+            element.style.transformOrigin = 'center top';
         });
-    }
+    });
-});
+    setTimeout(function () {
+        $('body > .navbar, body > .section, body > .footer').forEach(function (element) {
+            element.style.opacity = '1';
+            element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+        });
+        document.querySelector('body > .navbar').style.transform = 'translateY(0)';
+        ['.column-main > .card', '.column-left > .card', '.column-right > .card'].map(function (selector) {
+            var i = 1;
+            $(selector).forEach(function (element) {
+                setTimeout(function () {
+                    element.style.opacity = '1';
+                    element.style.transform = 'scale(1)';
+                    element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+                }, i * 100);
+                i++;
+            });
+        });
+    });
+})();

source/js/gallery.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
     if (typeof ($.fn.lightGallery) === 'function') {
         $('.article').lightGallery({ selector: '.gallery-item' });
     }