base渐变

src/pages/A0base/index.module.scss

@@ -18,18 +18,19 @@
       right: 0;
       transform: translateY(-55%) translateZ(0);
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
 
       .content {
-        position: relative;
+        position: absolute;
+        right: 150px;
         top: -20px;
         width: 68%;
         height: 100%;
         display: flex;
         flex-direction: column;
         gap: 10px;
-
+        transition: all 0.3s ease-in-out;
         .title {
           max-width: 80%;
           color: rgba(124, 75, 54, 1);
@@ -50,14 +51,6 @@
           }
         }
 
-        .titleAc {
-          animation: fade_out3 0.2s linear forwards;
-        }
-
-        .titleAni {
-          animation: fade_in3 0.2s linear forwards;
-        }
-
         .text {
           transition: all 0.3s ease-in-out;
           width: 90%;
@@ -71,14 +64,6 @@
           font-weight: 400;
         }
 
-        .textAc {
-          animation: fade_out4 0.2s linear forwards;
-        }
-
-        .textAni {
-          animation: fade_in4 0.2s linear forwards;
-        }
-
         .btn {
           position: absolute;
           bottom: -40px;
@@ -108,6 +93,15 @@
         }
       }
 
+      .contentShow {
+        opacity: 1;
+        z-index: 1;
+      }
+      .contentHide {
+        opacity: 0;
+        z-index: 0;
+      }
+
       .baseContent {
         width: 155px;
         height: 100%;

src/pages/A0base/index.tsx

@@ -11,28 +11,17 @@ import { baseUrl } from '@/utils/http'
 
 function A0base() {
   const [loding, setLoding] = useState(false)
-  const [isChanging, setIsChanging] = useState(false)
 
   useEffect(() => {
     // 切换场景
     cutUnityFu('TombstoneView', () => setLoding(true))
   }, [])
 
-
-
   const { myData, myLangue, videos } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentBase, setCurrentBase] = useState(0)
 
-
   const onClickBase = (index: number) => {
-    // setIsChanging(true)
-    // setTimeout(() => {
-    //   setCurrentBase(index)
-    //   setTimeout(() => {
-    //     setIsChanging(false)
-    //   }, 200)
-    // }, 200)
     setCurrentBase(index)
   }
 
@@ -72,19 +61,21 @@ function A0base() {
       <Zloding isShow={loding} bacNum={1} />
 
       <div className='A0baseContainner' id='opacityCss'>
-        <div className={`content`}>
-          <div className={`title ${isChanging ? 'titleAc' : 'titleAni'} songFontc`}>
-            {myData.baseInfo[currentBase].title}
+        {myData.baseInfo.map((item, index) => (
+          <div className={`content ${currentBase === index ? 'contentShow' : 'contentHide'}`} key={index}>
+            <div className={`title songFontc`}>
+              {item.title}
+            </div>
+            <div className={`text`}>{item.text}</div>
+            <div
+              className='btn songFontc'
+              id='opacityChange'
+              onClick={e => goto(e, item.path)}
+            >
+              {myLangue === 'ZH' ? '进入单元' : 'view details'}
+            </div>
           </div>
-          <div className={`text ${isChanging ? 'textAc' : 'textAni'} `}>{myData.baseInfo[currentBase].text}</div>
-          <div
-            className='btn songFontc'
-            id='opacityChange'
-            onClick={e => goto(e, myData.baseInfo[currentBase].path)}
-          >
-            {myLangue === 'ZH' ? '进入单元' : 'view details'}
-          </div>
-        </div>
+        ))}
         <div className='baseContent'>
           <div
             className={`base songFontc ${currentBase === 0 ? 'baseAc' : ''}`}