jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

优化进度条
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
liqian
2025-12-20 15:30:14 +08:00
parent 128fb60bad
commit 77e84f1086
3 changed files with 242 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/index/view/pc/topic_laptop/index.html
View File

@@ -905,28 +905,54 @@
})();
// 进度条动画
function animateProgressBars (container)
{
if (container._isAnimating) return;
container._isAnimating = true;
// function animateProgressBars (container)
// {
// if (container._isAnimating) return;
// container._isAnimating = true;
// const progressFills = container.querySelectorAll('.progress-fill');
// progressFills.forEach(fill =>
// {
// clearTimeout(fill._animateTimer);
// fill.style.width = '0';
// fill._animateTimer = setTimeout(() =>
// {
// const targetValue = fill.getAttribute('data-value');
// fill.style.width = targetValue + '%';
// setTimeout(() =>
// {
// container._isAnimating = false;
// }, 500);
// }, 100);
// });
// }
// 进度条动画 - 零HTML改动，仅优化性能
function animateProgressBars (container){
// 性能优化1：用WeakMap管理状态，避免污染DOM属性
const animationState = new WeakMap();
const state = animationState.get(container) || { isAnimating: false };
// 防止重复触发
if (state.isAnimating) return;
state.isAnimating = true;
animationState.set(container, state);
const progressFills = container.querySelectorAll('.progress-fill');
progressFills.forEach(fill =>
{
clearTimeout(fill._animateTimer);
fill.style.width = '0';
fill._animateTimer = setTimeout(() =>
// 性能优化2：重置用transform而非width
fill.style.transform = 'scaleX(0)';
// 性能优化3：用requestAnimationFrame替代setTimeout，对齐浏览器刷新
fill._animateTimer = requestAnimationFrame(() =>
{
const targetValue = fill.getAttribute('data-value');
fill.style.width = targetValue + '%';
setTimeout(() =>
{
container._isAnimating = false;
}, 500);
}, 100);
// 性能优化4：用transform替代width，消除重排
fill.style.transform = `scaleX(${targetValue / 100})`;
});
});
}
function isElementInView (el)
{
const rect = el.getBoundingClientRect();