React+TypeScript项目添加animsition类后页面空白求助

问题根源 #

页面空白的核心原因是animsition初始化时机错误：当前HTML中的main.js在React将组件渲染到DOM之前就执行了，此时页面里还不存在.animsition这个DOM元素，animsition无法完成初始化，进而引发样式异常（比如强制隐藏元素）或JS报错，最终导致页面空白。

解决方案 #

把animsition的初始化逻辑移到React组件内部，确保组件渲染完成后再调用初始化方法：

1. 修改App.tsx，用useEffect钩子在组件挂载后执行初始化：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 确认jQuery和animsition已加载
    if (window.jQuery) {
      const $ = window.jQuery;
      $(".animsition").animsition({
        inClass: "fade-in",
        outClass: "fade-out",
        inDuration: 1500,
        outDuration: 800,
        linkElement: ".animsition-link",
        loading: true,
        loadingParentElement: "html",
        loadingClass: "animsition-loading-1",
        loadingInner: '<div class="loader05"></div>',
        timeout: false,
        timeoutCountdown: 5000,
        onLoadEvent: true,
        browser: ["animation-duration", "-webkit-animation-duration"],
        overlay: false,
        overlayClass: "animsition-overlay-slide",
        overlayParentElement: "html",
        transition: function (url) {
          window.location.href = url;
        },
      });
    }
  }, []); // 空依赖数组保证仅在组件挂载时执行一次

  return (
    <div className="App">
      <div className="animsition">
        <header>
          <h1>React App</h1>
        </header>
      </div>
    </div>
  );
}

export default App;

2. 移除HTML中原有的main.js引用（初始化逻辑已移到组件内）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="animsition/css/animsition.min.css">
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script src="jquery/dist/jquery.js"></script>
        <script src="animsition/js/animsition.min.js"></script>
        <!-- 移除这一行：<script src="main.js"></script> -->
        <script src="main.js"></script> <!-- 保留React打包后的入口文件 -->
    </body>
</html>

额外排查点 #

• 检查animsition.min.css和animsition.min.js的路径是否正确，在开发者工具Network标签确认资源已成功加载。
• 若问题仍存在，打开Console标签查看是否有JS报错（比如jQuery未定义、animsition方法不存在），针对性解决依赖问题。

内容的提问来源于stack exchange，提问作者Mike