From a785bd3b847bb1fc939a3e264dcfa98088b73871 Mon Sep 17 00:00:00 2001 From: ppoffice Date: Tue, 13 Nov 2018 22:50:42 -0500 Subject: [PATCH] fix(plugin): make page rendering faster with animations --- includes/specs/plugins.spec.js | 10 ++--- layout/plugin/animejs.ejs | 5 +-- layout/plugin/mathjax.ejs | 4 +- layout/plugin/outdated-browser.ejs | 4 +- source/css/style.styl | 1 - source/js/animation.js | 68 +++++++++++++++--------------- source/js/gallery.js | 2 +- 7 files changed, 46 insertions(+), 48 deletions(-) diff --git a/includes/specs/plugins.spec.js b/includes/specs/plugins.spec.js index ebbdf32..5b384d4 100644 --- a/includes/specs/plugins.spec.js +++ b/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/)', diff --git a/layout/plugin/animejs.ejs b/layout/plugin/animejs.ejs index ce9f939..b26c476 100644 --- a/layout/plugin/animejs.ejs +++ b/layout/plugin/animejs.ejs @@ -1,8 +1,7 @@ <% if (plugin !== false) { %> <% if (head) { %> - + <% } else { %> - <%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %> - <%- _js('js/animation', true) %> + <%- _js('js/animation') %> <% } %> <% } %> \ No newline at end of file diff --git a/layout/plugin/mathjax.ejs b/layout/plugin/mathjax.ejs index 87d0d62..26604f3 100644 --- a/layout/plugin/mathjax.ejs +++ b/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) %> <% } %> diff --git a/source/css/style.styl b/source/css/style.styl index 744afba..2de578b 100644 --- a/source/css/style.styl +++ b/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 diff --git a/source/js/animation.js b/source/js/animation.js index 181f3b1..2625e7c 100644 --- a/source/js/animation.js +++ b/source/js/animation.js @@ -1,37 +1,37 @@ -function isIE() { - var ua = window.navigator.userAgent; - var msie = ua.indexOf('MSIE '); - var trident = ua.indexOf('Trident/'); - return (msie > 0 || trident > 0); -} - -document.addEventListener("DOMContentLoaded", function () { - var containers = document.querySelectorAll('body>.navbar,body>.section,body>.footer'); - for (var i = 0; i < containers.length; i++) { - containers[i].style.opacity = '1'; +(function () { + function $() { + return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments)); } - 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; - } - }) - }); - anime({ - targets: '.navbar-main', - translateY: [-100, 0], - opacity: [0, 1], - duration: 300, - easing: 'easeOutSine' + $('body > .navbar, body > .section, body > .footer').forEach(function (element) { + element.style.transition = '0s'; + element.style.opacity = '0'; + }); + document.querySelector('body > .navbar').style.transform = 'translateY(-100px)'; + ['.column-main > .card', '.column-left > .card', '.column-right > .card'].map(function (selector) { + $(selector).forEach(function (element) { + element.style.transition = '0s'; + element.style.opacity = '0'; + element.style.transform = 'scale(0.8)'; + element.style.transformOrigin = 'center top'; }); - } -}); \ No newline at end of file + }); + 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++; + }); + }); + }); +})(); diff --git a/source/js/gallery.js b/source/js/gallery.js index ba8b2be..682dc68 100644 --- a/source/js/gallery.js +++ b/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' }); }