From 1a52109ea0cea75dcaa9455be914872e71b8583d Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Fri, 7 Apr 2023 22:32:27 +0800 Subject: [PATCH 1/7] =?UTF-8?q?perf:=20waves=E5=9C=A8=E8=A7=86=E5=8F=A3?= =?UTF-8?q?=E5=A4=96=E6=97=B6=E5=81=9C=E6=AD=A2=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/css/_common/outline/header/waves.styl | 4 ++++ source/js/_app/global.ts | 2 +- source/js/_app/page.ts | 21 ++++++++++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/source/css/_common/outline/header/waves.styl b/source/css/_common/outline/header/waves.styl index 62bfb34..7ad3926 100644 --- a/source/css/_common/outline/header/waves.styl +++ b/source/css/_common/outline/header/waves.styl @@ -18,6 +18,10 @@ animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite; } +use.stop-animation { + animation-play-state: paused; +} + .parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; diff --git a/source/js/_app/global.ts b/source/js/_app/global.ts index eb22858..862349f 100644 --- a/source/js/_app/global.ts +++ b/source/js/_app/global.ts @@ -237,7 +237,7 @@ const scrollHandle = function (event) { backToTop.child('span').innerText = scrollPercent; } // 更新百分比进度条的宽度 - if($dom('#sidebar').hasClass('affix')) { + if($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) { $dom('.percent').changeOrGetWidth(scrollPercent) } } diff --git a/source/js/_app/page.ts b/source/js/_app/page.ts index facec76..c6de07f 100644 --- a/source/js/_app/page.ts +++ b/source/js/_app/page.ts @@ -570,6 +570,26 @@ const algoliaSearch = function (pjax) { }) } +const createIntersectionObserver = function () { + if (!window.IntersectionObserver) { + return; + } + new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + document.querySelectorAll('.parallax>use').forEach(i => { + i.classList.remove('stop-animation'); + }) + } else { + document.querySelectorAll('.parallax>use').forEach(i => { + i.classList.add('stop-animation'); + }) + } + }, { + root: null, + threshold: 0.2 + }).observe(document.getElementById('waves')); +} + /* pjax部分 */ const domInit = function () { @@ -607,6 +627,7 @@ const domInit = function () { toolPlayer.player.mini() }) } + createIntersectionObserver(); } const pjaxReload = function () { From 6dc0fb4a6ef6f54499616b84d53f911721c2f8d8 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Fri, 7 Apr 2023 22:34:53 +0800 Subject: [PATCH 2/7] =?UTF-8?q?perf:=20waves=E5=9C=A8=E8=A7=86=E5=8F=A3?= =?UTF-8?q?=E5=A4=96=E6=97=B6=E5=81=9C=E6=AD=A2=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/_app/page.ts | 50 +++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/source/js/_app/page.ts b/source/js/_app/page.ts index c6de07f..5e8a03b 100644 --- a/source/js/_app/page.ts +++ b/source/js/_app/page.ts @@ -1,4 +1,4 @@ -declare const algoliasearch:any, quicklink:any, instantsearch:any +declare const algoliasearch: any, quicklink: any, instantsearch: any const cardActive = function () { if (!$dom('.index.wrap')) { return } @@ -52,7 +52,7 @@ const cardActive = function () { const registerExtURL = function () { $dom.each('span.exturl', function (element) { - const link = document.createElement('a') + const link = document.createElement('a') // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings link.href = decodeURIComponent(atob(element.dataset.url).split('').map(function (c) { @@ -208,7 +208,7 @@ const postBeauty = function () { copyBtn.remove() } else { copyBtn.addEventListener('click', function (event) { - const target = event.currentTarget + const target = event.currentTarget let comma = ''; let code = '' code_container.find('pre').forEach(function (line) { code += comma + line.innerText @@ -508,8 +508,8 @@ const algoliaSearch = function (pjax) { }, empty: function (data) { return '
' + - LOCAL.search.empty.replace(/\$\{query}/, data.query) + - '
' + LOCAL.search.empty.replace(/\$\{query}/, data.query) + + '' } }, cssClasses: { @@ -570,26 +570,6 @@ const algoliaSearch = function (pjax) { }) } -const createIntersectionObserver = function () { - if (!window.IntersectionObserver) { - return; - } - new IntersectionObserver(([entry]) => { - if (entry.isIntersecting) { - document.querySelectorAll('.parallax>use').forEach(i => { - i.classList.remove('stop-animation'); - }) - } else { - document.querySelectorAll('.parallax>use').forEach(i => { - i.classList.add('stop-animation'); - }) - } - }, { - root: null, - threshold: 0.2 - }).observe(document.getElementById('waves')); -} - /* pjax部分 */ const domInit = function () { @@ -627,6 +607,26 @@ const domInit = function () { toolPlayer.player.mini() }) } + // waves在视口外时停止动画 + const createIntersectionObserver = function () { + if (!window.IntersectionObserver) { + return; + } + new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + document.querySelectorAll('.parallax>use').forEach(i => { + i.classList.remove('stop-animation'); + }) + } else { + document.querySelectorAll('.parallax>use').forEach(i => { + i.classList.add('stop-animation'); + }) + } + }, { + root: null, + threshold: 0.2 + }).observe(document.getElementById('waves')); + } createIntersectionObserver(); } From afadc13aa1f88481aaba795c6fdfa1490adb28f6 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Fri, 7 Apr 2023 22:36:04 +0800 Subject: [PATCH 3/7] =?UTF-8?q?perf:=20waves=E5=9C=A8=E8=A7=86=E5=8F=A3?= =?UTF-8?q?=E5=A4=96=E6=97=B6=E5=81=9C=E6=AD=A2=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/_app/page.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/js/_app/page.ts b/source/js/_app/page.ts index 5e8a03b..359d566 100644 --- a/source/js/_app/page.ts +++ b/source/js/_app/page.ts @@ -1,4 +1,4 @@ -declare const algoliasearch: any, quicklink: any, instantsearch: any +declare const algoliasearch:any, quicklink:any, instantsearch:any const cardActive = function () { if (!$dom('.index.wrap')) { return } @@ -52,7 +52,7 @@ const cardActive = function () { const registerExtURL = function () { $dom.each('span.exturl', function (element) { - const link = document.createElement('a') + const link = document.createElement('a') // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings link.href = decodeURIComponent(atob(element.dataset.url).split('').map(function (c) { @@ -208,7 +208,7 @@ const postBeauty = function () { copyBtn.remove() } else { copyBtn.addEventListener('click', function (event) { - const target = event.currentTarget + const target = event.currentTarget let comma = ''; let code = '' code_container.find('pre').forEach(function (line) { code += comma + line.innerText From b00426e58c5d45e2b06b6b8e61a7ff5239576327 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Sat, 8 Apr 2023 11:35:38 +0800 Subject: [PATCH 4/7] =?UTF-8?q?perf:=20imgs=E5=9C=A8=E8=A7=86=E5=8F=A3?= =?UTF-8?q?=E5=A4=96=E5=81=9C=E6=AD=A2=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/css/_common/outline/header/waves.styl | 3 ++- source/js/_app/global.ts | 20 ++++++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/source/css/_common/outline/header/waves.styl b/source/css/_common/outline/header/waves.styl index 7ad3926..dba68c4 100644 --- a/source/css/_common/outline/header/waves.styl +++ b/source/css/_common/outline/header/waves.styl @@ -18,7 +18,8 @@ animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite; } -use.stop-animation { +use.stop-animation, +#imgs li.stop-animation { animation-play-state: paused; } diff --git a/source/js/_app/global.ts b/source/js/_app/global.ts index 862349f..6ebc02e 100644 --- a/source/js/_app/global.ts +++ b/source/js/_app/global.ts @@ -170,7 +170,7 @@ const showtip = function (msg: string): void | never { } const resizeHandle = function (event?) { -// 获取 siteNav 的高度 + // 获取 siteNav 的高度 siteNavHeight = siteNav.changeOrGetHeight() // 获取 siteHeader 的高度 headerHightInner = siteHeader.changeOrGetHeight() @@ -186,7 +186,7 @@ const resizeHandle = function (event?) { oWinHeight = window.innerHeight oWinWidth = window.innerWidth // 设置 sidebar .panels 元素的高度 -// sideBar.child('.panels').changeOrGetHeight(oWinHeight + 'px') + // sideBar.child('.panels').changeOrGetHeight(oWinHeight + 'px') } const scrollHandle = function (event) { @@ -233,13 +233,25 @@ const scrollHandle = function (event) { // 计算滚动百分比 const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%' // 更新回到顶部按钮的文字 - if(backToTop.child('span').innerText !== scrollPercent) { + if (backToTop.child('span').innerText !== scrollPercent) { backToTop.child('span').innerText = scrollPercent; } // 更新百分比进度条的宽度 - if($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) { + if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) { $dom('.percent').changeOrGetWidth(scrollPercent) } + // imgs在视口外时停止动画 + // 是否可以用IntersectionObserver代替？ + const { top } = document.getElementById('main').getBoundingClientRect(); + if (top >= 0) { + document.querySelectorAll('#imgs .item').forEach(i => { + i.classList.remove('stop-animation'); + }) + } else { + document.querySelectorAll('#imgs .item').forEach(i => { + i.classList.add('stop-animation'); + }) + } } const pagePosition = function () { From 28b248890b42cb12a84169ea4b34e04f382c2488 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Sat, 8 Apr 2023 15:30:13 +0800 Subject: [PATCH 5/7] =?UTF-8?q?perf:=20=E5=9B=BE=E6=A0=87=E5=9C=A8?= =?UTF-8?q?=E8=A7=86=E5=8F=A3=E5=A4=96=E6=97=B6=E6=9A=82=E5=81=9C=E5=8A=A8?= =?UTF-8?q?=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/css/_common/outline/header/waves.styl | 4 +- source/js/_app/page.ts | 43 ++++++++++++++++++-- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/source/css/_common/outline/header/waves.styl b/source/css/_common/outline/header/waves.styl index dba68c4..f865e09 100644 --- a/source/css/_common/outline/header/waves.styl +++ b/source/css/_common/outline/header/waves.styl @@ -19,7 +19,9 @@ } use.stop-animation, -#imgs li.stop-animation { +#imgs li.stop-animation, +.code-container .show-btn .ic.stop-animation, +.rotate.stop-animation { animation-play-state: paused; } diff --git a/source/js/_app/page.ts b/source/js/_app/page.ts index 359d566..7498410 100644 --- a/source/js/_app/page.ts +++ b/source/js/_app/page.ts @@ -1,4 +1,4 @@ -declare const algoliasearch:any, quicklink:any, instantsearch:any +declare const algoliasearch: any, quicklink: any, instantsearch: any const cardActive = function () { if (!$dom('.index.wrap')) { return } @@ -52,7 +52,7 @@ const cardActive = function () { const registerExtURL = function () { $dom.each('span.exturl', function (element) { - const link = document.createElement('a') + const link = document.createElement('a') // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings link.href = decodeURIComponent(atob(element.dataset.url).split('').map(function (c) { @@ -208,7 +208,7 @@ const postBeauty = function () { copyBtn.remove() } else { copyBtn.addEventListener('click', function (event) { - const target = event.currentTarget + const target = event.currentTarget let comma = ''; let code = '' code_container.find('pre').forEach(function (line) { code += comma + line.innerText @@ -359,6 +359,29 @@ const postBeauty = function () { btns: [] }).player.load(JSON.parse(element.attr('data-src'))).fetch() }) + + const angleDown = document.querySelectorAll('.show-btn .i-angle-down'); + if (angleDown.length) { + const io = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + angleDown.forEach(i => { + i.classList.remove('stop-animation'); + }) + } else { + angleDown.forEach(i => { + i.classList.add('stop-animation'); + }) + } + }) + }, { + root: null, + threshold: 0.5 + }); + angleDown.forEach(i => { + io.observe(i); + }) + } } const tabFormat = function () { @@ -626,6 +649,20 @@ const domInit = function () { root: null, threshold: 0.2 }).observe(document.getElementById('waves')); + new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + document.querySelectorAll('.with-love>i').forEach(i => { + i.classList.remove('stop-animation'); + }) + } else { + document.querySelectorAll('.with-love>i').forEach(i => { + i.classList.add('stop-animation'); + }) + } + }, { + root: null, + threshold: 0.2 + }).observe(document.querySelector('.with-love')); } createIntersectionObserver(); } From b382df5791cf3fef5cc0c23cb59caf203df92026 Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Sun, 9 Apr 2023 19:00:12 +0800 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=E6=94=B9=E5=8F=98stop-animatio?= =?UTF-8?q?n=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/css/_common/components/highlight/highlight.styl | 4 ++++ source/css/_common/outline/header/image.styl | 4 ++++ source/css/_common/outline/header/waves.styl | 5 +---- source/css/_common/scaffolding/animate.styl | 4 ++++ 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/source/css/_common/components/highlight/highlight.styl b/source/css/_common/components/highlight/highlight.styl index 0490aca..e19a261 100644 --- a/source/css/_common/components/highlight/highlight.styl +++ b/source/css/_common/components/highlight/highlight.styl @@ -246,6 +246,10 @@ code, .ic { margin-top: 1rem; @extend .up-down; + + &.stop-animation { + animation-play-state: paused; + } } &.open { diff --git a/source/css/_common/outline/header/image.styl b/source/css/_common/outline/header/image.styl index b9863db..236ea62 100644 --- a/source/css/_common/outline/header/image.styl +++ b/source/css/_common/outline/header/image.styl @@ -10,6 +10,10 @@ background-color: #363636; content-visibility: auto; contain-intrinsic-size: 100vw 70vh; + + li.stop-animation { + animation-play-state: paused; + } img { width: 100%; diff --git a/source/css/_common/outline/header/waves.styl b/source/css/_common/outline/header/waves.styl index f865e09..7ad3926 100644 --- a/source/css/_common/outline/header/waves.styl +++ b/source/css/_common/outline/header/waves.styl @@ -18,10 +18,7 @@ animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite; } -use.stop-animation, -#imgs li.stop-animation, -.code-container .show-btn .ic.stop-animation, -.rotate.stop-animation { +use.stop-animation { animation-play-state: paused; } diff --git a/source/css/_common/scaffolding/animate.styl b/source/css/_common/scaffolding/animate.styl index 881f2f6..5060623 100644 --- a/source/css/_common/scaffolding/animate.styl +++ b/source/css/_common/scaffolding/animate.styl @@ -4,6 +4,10 @@ animation: rotate 6s linear infinite; } +.rotate.stop-animation { + animation-play-state: paused; +} + .beat { animation: beat 1.33s ease-in-out infinite; } From 050dd4cd7e032a7a3ebdbf30a48e4619800422fa Mon Sep 17 00:00:00 2001 From: D-Sketon <2055272094@qq.com> Date: Sun, 9 Apr 2023 19:14:46 +0800 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20IntersectionObserver=E4=BB=A3?= =?UTF-8?q?=E6=9B=BFscroll=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/_app/global.ts | 22 +++++++++++----------- source/js/_app/page.ts | 38 +++++++++++++++++++++++--------------- 2 files changed, 34 insertions(+), 26 deletions(-) diff --git a/source/js/_app/global.ts b/source/js/_app/global.ts index 6ebc02e..395bd27 100644 --- a/source/js/_app/global.ts +++ b/source/js/_app/global.ts @@ -241,17 +241,17 @@ const scrollHandle = function (event) { $dom('.percent').changeOrGetWidth(scrollPercent) } // imgs在视口外时停止动画 - // 是否可以用IntersectionObserver代替？ - const { top } = document.getElementById('main').getBoundingClientRect(); - if (top >= 0) { - document.querySelectorAll('#imgs .item').forEach(i => { - i.classList.remove('stop-animation'); - }) - } else { - document.querySelectorAll('#imgs .item').forEach(i => { - i.classList.add('stop-animation'); - }) - } + // 已被IntersectionObserver代替 + // const { top } = document.getElementById('main').getBoundingClientRect(); + // if (top >= 0) { + // document.querySelectorAll('#imgs .item').forEach(i => { + // i.classList.remove('stop-animation'); + // }) + // } else { + // document.querySelectorAll('#imgs .item').forEach(i => { + // i.classList.add('stop-animation'); + // }) + // } } const pagePosition = function () { diff --git a/source/js/_app/page.ts b/source/js/_app/page.ts index 7498410..7330763 100644 --- a/source/js/_app/page.ts +++ b/source/js/_app/page.ts @@ -360,17 +360,18 @@ const postBeauty = function () { }).player.load(JSON.parse(element.attr('data-src'))).fetch() }) - const angleDown = document.querySelectorAll('.show-btn .i-angle-down'); + const angleDown = document.querySelectorAll('.show-btn .i-angle-down') if (angleDown.length) { + if (!window.IntersectionObserver) return const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { angleDown.forEach(i => { - i.classList.remove('stop-animation'); + i.classList.remove('stop-animation') }) } else { angleDown.forEach(i => { - i.classList.add('stop-animation'); + i.classList.add('stop-animation') }) } }) @@ -379,7 +380,7 @@ const postBeauty = function () { threshold: 0.5 }); angleDown.forEach(i => { - io.observe(i); + io.observe(i) }) } } @@ -630,41 +631,48 @@ const domInit = function () { toolPlayer.player.mini() }) } - // waves在视口外时停止动画 + const createIntersectionObserver = function () { - if (!window.IntersectionObserver) { - return; - } + if (!window.IntersectionObserver) return + // waves在视口外时停止动画 new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { document.querySelectorAll('.parallax>use').forEach(i => { - i.classList.remove('stop-animation'); + i.classList.remove('stop-animation') }) + document.querySelectorAll('#imgs .item').forEach(i=>{ + i.classList.remove('stop-animation') + }) } else { document.querySelectorAll('.parallax>use').forEach(i => { - i.classList.add('stop-animation'); + i.classList.add('stop-animation') }) + // waves不可见时imgs也应该不可见了 + document.querySelectorAll('#imgs .item').forEach(i=>{ + i.classList.add('stop-animation') + }) } }, { root: null, threshold: 0.2 - }).observe(document.getElementById('waves')); + }).observe(document.getElementById('waves')) + // sakura在视口外时停止动画 new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { document.querySelectorAll('.with-love>i').forEach(i => { - i.classList.remove('stop-animation'); + i.classList.remove('stop-animation') }) } else { document.querySelectorAll('.with-love>i').forEach(i => { - i.classList.add('stop-animation'); + i.classList.add('stop-animation') }) } }, { root: null, threshold: 0.2 - }).observe(document.querySelector('.with-love')); + }).observe(document.querySelector('.with-love')) } - createIntersectionObserver(); + createIntersectionObserver() } const pjaxReload = function () {