Optimize header animation

This commit is contained in:
Mimi 2020-06-28 21:55:51 +08:00
parent b39ba186d9
commit 5b72a1de42
4 changed files with 11 additions and 14 deletions

View File

@ -2,6 +2,8 @@
<style> <style>
body { margin-top: 2rem; } body { margin-top: 2rem; }
.use-motion .header-inner,
.use-motion .site-brand-container .toggle,
.use-motion .menu-item, .use-motion .menu-item,
.sidebar-inner, .sidebar-inner,
.use-motion .post-block, .use-motion .post-block,
@ -13,7 +15,7 @@
.use-motion .site-title, .use-motion .site-title,
.use-motion .site-subtitle, .use-motion .site-subtitle,
.use-motion .site-brand-container .toggle { .use-motion .custom-logo-image {
opacity: initial; opacity: initial;
top: initial; top: initial;
} }

View File

@ -23,6 +23,12 @@
padding: 0 10px; padding: 0 10px;
} }
.use-motion {
.header-inner, .site-brand-container .toggle {
opacity: 0;
}
}
@import 'site-meta'; @import 'site-meta';
@import 'site-nav'; @import 'site-nav';
@import 'menu'; @import 'menu';

View File

@ -26,11 +26,3 @@
display: block; display: block;
} }
} }
.use-motion {
.site-brand-container .toggle {
opacity: 0;
position: relative;
top: -10px;
}
}

View File

@ -29,6 +29,7 @@ NexT.motion.integrator = {
NexT.motion.middleWares = { NexT.motion.middleWares = {
logo: function(integrator) { logo: function(integrator) {
const sequence = []; const sequence = [];
const header = document.querySelector('.header-inner');
const image = document.querySelector('.custom-logo-image'); const image = document.querySelector('.custom-logo-image');
const title = document.querySelector('.site-title'); const title = document.querySelector('.site-title');
const subtitle = document.querySelector('.site-subtitle'); const subtitle = document.querySelector('.site-subtitle');
@ -62,16 +63,12 @@ NexT.motion.middleWares = {
}); });
} }
header && pushToSequence(header);
CONFIG.scheme === 'Mist' && logoLine.length && getMistLineSettings(logoLine); CONFIG.scheme === 'Mist' && logoLine.length && getMistLineSettings(logoLine);
CONFIG.scheme === 'Muse' && image && pushToSequence(image); CONFIG.scheme === 'Muse' && image && pushToSequence(image);
title && pushToSequence(title); title && pushToSequence(title);
subtitle && pushToSequence(subtitle); subtitle && pushToSequence(subtitle);
toggle.length && pushToSequence(toggle); toggle.length && pushToSequence(toggle);
(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushToSequence(image); (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushToSequence(image);
if (sequence.length > 0) { if (sequence.length > 0) {