1
---
2
import { siteConfig } from "@/config";
3

4
interface Props {
5
  enable?: boolean;
6
  text?: string;
7
  duration?: number;
8
}
9

10
const {
11
  enable = siteConfig.preloader.enable,
12
  text = siteConfig.preloader.text || siteConfig.title,
13
  duration = siteConfig.preloader.duration
14
} = Astro.props;
15
---
16

17
{enable && (
18
  <div class="preloader">
19
    <h2 class="ml13">{text}</h2>
20
  </div>
21
)}
22

23
<style is:global>
24
  .preloader {
25
    position: fixed;
26
    display: flex;
27
    justify-content: center;
28
    align-items: center;
29
    width: 100vw;
30
    height: 100vh;
31
    background-color: var(--page-bg);
32
    z-index: 1100;
33
    transition: opacity 0.3s ease-in-out;
34
  }
35

36
  .ml13 {
37
    font-size: 3.2rem;
38
    color: var(--primary);
39
    letter-spacing: -1px;
40
    font-weight: 500;
41
    text-align: center;
42
    opacity: 0;
43
  }
44

45
  .ml13.ready {
46
    opacity: 1;
47
  }
48

49
  .ml13 .word {
50
    display: inline-flex;
51
    flex-wrap: wrap;
52
    white-space: nowrap;
53
  }
54

55
  .ml13 .letter {
56
    display: inline-block;
57
    line-height: 1em;
58
    opacity: 0;
59
    transform: translateY(25px);
60
    filter: blur(5px);
61
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
62
  }
63
</style>
64

65
<script define:vars={{ preloaderDuration: duration }}>
66
  function initPreloader() {
67
    const textWrapper = document.querySelector('.ml13');
68
    if (!textWrapper) return;
69

70
    const words = textWrapper.textContent?.trim().split(' ') || [];
71
    textWrapper.innerHTML = '';
72

73
    words.forEach((word) => {
74
      const wordSpan = document.createElement('span');
75
      wordSpan.classList.add('word');
76
      wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
77
      textWrapper.appendChild(wordSpan);
78
      textWrapper.appendChild(document.createTextNode(' '));
79
    });
80

81
    // 文字分割完成，显示容器
82
    textWrapper.classList.add('ready');
83

84
    function hidePreloader() {
85
      const preloader = document.querySelector('.preloader');
86
      if (preloader) {
87
        preloader.style.opacity = '0';
88
        setTimeout(() => {
89
          preloader.style.display = 'none';
90
        }, 300);
91
      }
92
    }
93

94
    // 使用 requestAnimationFrame 确保动画流畅
95
    const letters = document.querySelectorAll('.ml13 .letter');
96

97
    // 等待浏览器渲染完成后再开始动画
98
    requestAnimationFrame(() => {
99
      requestAnimationFrame(() => {
100
        // 淡入动画 - 增加初始延迟确保稳定性
101
        letters.forEach((letter, i) => {
102
          setTimeout(() => {
103
            letter.style.opacity = '1';
104
            letter.style.transform = 'translateY(0)';
105
            letter.style.filter = 'blur(0px)';
106
          }, 500 + i * 30);
107
        });
108

109
        // 使用配置的时长控制淡出时机
110
        const fadeOutDelay = preloaderDuration * 0.6; // 60% 时开始淡出
111
        setTimeout(() => {
112
          letters.forEach((letter, i) => {
113
            setTimeout(() => {
114
              letter.style.opacity = '0';
115
              letter.style.transform = 'translateY(-50px)';
116
              letter.style.filter = 'blur(5px)';
117
            }, i * 15);
118
          });
119

120
          // 计算最后一个字母完全淡出的时间
121
          const lastLetterDelay = (letters.length - 1) * 15; // 最后一个字母开始淡出的延迟
122
          const transitionDuration = 250; // CSS transition 时长 0.6s
123
          const totalFadeOutTime = lastLetterDelay + transitionDuration;
124

125
          // 等待所有文字完全淡出后再隐藏遮罩
126
          setTimeout(hidePreloader, totalFadeOutTime);
127
        }, fadeOutDelay);
128
      });
129
    });
130

131
    // 页面加载完成后也隐藏（备用方案）
132
    window.addEventListener('load', () => {
133
      setTimeout(hidePreloader, preloaderDuration);
134
    });
135
  }
136

137
  // 确保 DOM 完全准备好
138
  if (document.readyState === 'loading') {
139
    document.addEventListener('DOMContentLoaded', initPreloader);
140
  } else {
141
    initPreloader();
142
  }
143
</script>

1
preloader: {
2
    enable: true, // 启用页面加载遮罩
3
    text: "(∠・ω< )⌒★", // 自定义显示文字，留空则使用网站标题
4
    duration: 2000, // 遮罩显示时长（毫秒）
5
}