fix: 修改演示功能 动画影起字体模糊

src/pages/bootpage/template/demonstration/index.js

@@ -58,7 +58,7 @@ const Demonstration = props => {
   const [productData, setProductData] = useState([]);
   const [newProductData, setNewProductData] = useState([]);
   const [productConfig, setProductConfig] = useState({}); // 项目案例是否可免密跳转
-
+  const [showAnimation, setShowAnimation] = useState(true);
   const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮，三维平台用
   const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
   // 退出
@@ -435,6 +435,10 @@ const Demonstration = props => {
       setTimeout(() => {
         setShowContent(true);
       }, 0);
+      // 延迟1s去掉入场动画，解决动画会使字体模糊
+      setTimeout(() => {
+        setShowAnimation(false);
+      }, 1000);
     }
   }, [loading]);
   useEffect(() => {
@@ -537,7 +541,12 @@ const Demonstration = props => {
 
         {showContent ? (
           <>
-            <div className={classNames(styles.row, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}>
+            <div
+              className={classNames(
+                styles.row,
+                showAnimation ? 'animate__fadeInDown animate__animated duration-500ms' : '',
+              )}
+            >
               <div className={styles.row_l}>
                 <LeftItem
                   setSelectKey={setSelectKey}
@@ -554,11 +563,21 @@ const Demonstration = props => {
                 <RightItem listData={newProductData} productConfig={productConfig} handToProduct={handToProduct} />
               </div>
             </div>
-            <div className={classNames(styles.center_wrap, 'animate__fadeIn', 'animate__animated', 'duration-500ms')}>
+            <div
+              className={classNames(
+                styles.center_wrap,
+                showAnimation ? 'animate__fadeIn animate__animated duration-500ms' : '',
+              )}
+            >
               <div className={styles.center_tip} />
               <div className={styles.center}>{renderCenter}</div>
             </div>
-            <div className={classNames(styles.bottom, 'animate__fadeInUp', 'animate__animated', 'duration-500ms')}>
+            <div
+              className={classNames(
+                styles.bottom,
+                showAnimation ? 'animate__fadeInUp animate__animated duration-500ms' : '',
+              )}
+            >
               <BottomItem
                 listData={projectData}
                 configData={configData}