1

client/src/pages/Blog.vue

@@ -52,12 +52,16 @@ const blogPosts = ref<Post[]>([])
 const loading = ref(false)
 const error = ref('')
 
+const { initObserver } = useScrollAnimation()
+
 const fetchBlogPosts = async () => {
   loading.value = true
   error.value = ''
   try {
     const posts = await fetchPosts()
     blogPosts.value = posts
+    // 初始化动画 - 在数据加载完成后
+    initObserver()
   } catch (err) {
     console.error('Error fetching blog posts:', err)
     error.value = '获取博客文章失败，请稍后重试'
@@ -66,14 +70,8 @@ const fetchBlogPosts = async () => {
   }
 }
 
-onBeforeMount(() => {
-  fetchBlogPosts()
-})
-
 onMounted(() => {
-  // 启用滚动动画
-  useScrollAnimation()
-
+  fetchBlogPosts()
   // 初始化Lucide图标
   if (window.lucide) {
     window.lucide.createIcons()