up

src/components/Zloding/index.module.scss

@@ -62,8 +62,6 @@
   pointer-events: auto;
 }
 
-// 新增：这个类用于定义关闭时的过渡效果
-.ZlodingClosing {
-  // 只对 opacity 属性应用过渡，持续0.8秒
-  transition: opacity 0.8s;
+.ZlodingChange {
+  transition: opacity 1s;
 }

src/components/Zloding/index.tsx

@@ -15,6 +15,9 @@ type Props = {
 }
 
 function Zloding({ isShow, bacNum, callBackFu }: Props) {
+  // 增加消失的时候透明度
+  const [flag, setFlag] = useState(false)
+
   const [showFlag, setShowFlag] = useState(false)
 
   useEffect(() => {
@@ -29,18 +32,26 @@ function Zloding({ isShow, bacNum, callBackFu }: Props) {
   const [loding, setLoding] = useState(0)
   const lodingRef = useRef(0)
 
+  const timeRef = useRef(-1)
+
+  const flagRef = useRef(true)
+
   useEffect(() => {
     if (showFlag) {
       window.unityLoading = (progress: number) => {
         const num = Math.round(Number(progress * 100))
         setLoding(num)
-        if (num >= 100) {
-          setShowFlag(false)
-          if (callBackFu) callBackFu()
 
-          setTimeout(() => {
+        if (num >= 100 && flagRef.current) {
+          clearTimeout(timeRef.current)
+          setShowFlag(false)
+          setFlag(true)
+          timeRef.current = window.setTimeout(() => {
             setLoding(0)
-          }, 200)
+            setFlag(false)
+          }, 1000)
+          if (callBackFu) callBackFu()
+          flagRef.current = false
         }
       }
     }
@@ -53,7 +64,11 @@ function Zloding({ isShow, bacNum, callBackFu }: Props) {
   return (
     <div
       id='Zloding'
-      className={classNames(styles.Zloding, showFlag ? styles.ZlodingShow : '')}
+      className={classNames(
+        styles.Zloding,
+        showFlag ? styles.ZlodingShow : '',
+        flag && !showFlag ? styles.ZlodingChange : ''
+      )}
       style={{ backgroundImage: `url(${bacImgRes})` }}
     >
       <div className='ZlodingBox'>

src/pages/A0base/data.ts

@@ -30,24 +30,31 @@ export const cutUnityFu = (
   backFu: () => void
 ) => {
   const dom: any = document.getElementById('modalIframe')
-  const iframeWindow = dom.contentWindow
 
-  const res: any = iframeWindow.sceneStaRes()
-
-  if (res !== val) {
-    unityShow(true)
-    callIframeFu('loadScene', val)
-    backFu()
+  if (dom.src.includes('unity')) {
+    if (dom && dom.contentWindow) {
+      const iframeWindow = dom.contentWindow
+
+      if (iframeWindow.sceneStaRes) {
+        const res: any = iframeWindow.sceneStaRes()
+
+        if (res !== val) {
+          unityShow(true)
+          callIframeFu('loadScene', val)
+          backFu()
+        }
+      }
+    }
+  } else {
+    // 被销毁了，需要重新加载
+    // lodingUnityFu()
   }
 }
 
-//判断是否需要切换unity
+// 重新加载unity
+// export const lodingUnityAgainFu = () => {
+//   const rootDom = document.querySelector('#root') as HTMLDivElement
+//   if (rootDom) {
 
-// 销毁unity
-// export const delUnityFu = () => {
-//   const modalIframe = getUnityDomFu()
-//   if (modalIframe) {
-//     modalIframe.src = ''
-//     console.log(modalIframe)
 //   }
 // }

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -1,21 +1,24 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+// import { domDelOwnFu } from '@/utils/utilsSome'
 
 function Discover(props: { style?: React.CSSProperties }) {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   // 将隐藏的页面打开，全景图->诗歌->大场景
-  const lookScene = () => {
+  const lookScene = useCallback(() => {
+    // 销毁unity
+    // domDelOwnFu('#modalIframe')
 
     const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
     panoramicRoot.style.display = 'block'
     // 打开全景图
     window.setIsShowPano(true)
-  }
+  }, [])
   const [isShowRecord, setIsShowRecord] = useState(true)
 
   // 点击查看流转轨迹之后的动画