init

config/webpack.common.config.js

@@ -74,6 +74,7 @@ module.exports = function (isProd) {
     entry: sparkConfig.ENTRY,
     mode: isProd ? 'production' : 'development',
     devtool: isProd ? "source-map" : "cheap-module-source-map",
+
     output: {
       path: path.resolve(__dirname, sparkConfig.OUTPUT_DIR),
       filename: "js/[name].js",
@@ -95,10 +96,15 @@ module.exports = function (isProd) {
         {
           test: /\.(js|jsx)$/,
           loader: require.resolve("babel-loader"),
-          // exclude: [path.resolve("node_modules")],
+          exclude: /node_modules/,
           options: {
             presets: [
-              require("@babel/preset-env").default,
+              [require("@babel/preset-env").default, {
+                targets: {
+                  browsers: ["> 1%", "last 2 versions", "not ie <= 8"]
+                },
+                modules: false
+              }],
               require("@babel/preset-react").default
             ],
             plugins: [
@@ -109,6 +115,7 @@ module.exports = function (isProd) {
             sourceType: 'unambiguous'
           },
         },
+
         {
           test: [/\.(jpg|jpeg|png|svg|bmp)$/, /\.(eot|woff2?|ttf|svg)$/],
           loader: require.resolve("url-loader"),

package.json

@@ -27,7 +27,6 @@
     "javascript-obfuscator": "^4.1.0",
     "mobx": "^6.2.0",
     "mobx-react": "^7.1.0",
-    "motion": "^12.23.5",
     "qs": "^6.9.4",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

src/components/ReviewPanel/ReviewPanel.jsx

 import React from "react";
 import {observer} from "mobx-react";
-import {motion} from "motion";
 import "./ReviewPanel.less";
 import {SvgaPlayer} from "@spark/svgaplayer";
 import {RES_PATH} from "../../../sparkrc";
@@ -11,10 +10,30 @@ import modalStore from "@src/store/modal";
 
 @observer
 class ReviewPanel extends React.Component {
+  state = {
+    itemsVisible: new Array(5).fill(false)
+  };
 
   componentDidMount() {
+    // 延迟启动动画
+    setTimeout(() => {
+      this.startAnimation();
+    }, 200);
   }
 
+  startAnimation = () => {
+    // 逐个显示 item
+    this.state.itemsVisible.forEach((_, index) => {
+      setTimeout(() => {
+        this.setState(prevState => ({
+          itemsVisible: prevState.itemsVisible.map((visible, i) => 
+            i === index ? true : visible
+          )
+        }));
+      }, index * 300); // 每个 item 延迟 300ms
+    });
+  };
+
   clickNext = () => {
     modalStore.closePop();
     store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds});
@@ -22,63 +41,29 @@ class ReviewPanel extends React.Component {
 
   render() {
     const {funds} = this.props.popData;
-
-    // 动画配置
-    const containerVariants = {
-      hidden: { opacity: 0 },
-      visible: {
-        opacity: 1,
-        transition: {
-          staggerChildren: 0.3, // 每个子元素延迟0.3秒出现
-          delayChildren: 0.2    // 整体延迟0.2秒开始
-        }
-      }
-    };
-
-    const itemVariants = {
-      hidden: { 
-        opacity: 0, 
-        y: -50,
-        scale: 0.8
-      },
-      visible: { 
-        opacity: 1, 
-        y: 0,
-        scale: 1,
-        transition: {
-          duration: 0.6,
-          ease: "easeOut"
-        }
-      }
-    };
+    const {itemsVisible} = this.state;
 
     // 当前题目
     return <div className="ReviewPanel modal_center" onClick={this.clickNext}>
       <SvgaPlayer className="effect" src={RES_PATH + "svga/2输出弹窗氛围.svga"}/>
       <div className="bg"/>
-      <motion.div
-        className="items-container"
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-      >
+      <div className="items-container">
         {
           new Array(5).fill(1).map((item, index) => {
             return (
-              <motion.div 
+              <div 
                 key={index}
-                className={`item item${index % 2}`} 
+                className={`item item${index % 2} ${itemsVisible[index] ? 'item-visible' : ''}`} 
                 style={{
                   top: (217 + index * 250) * remScale,
                 }}
-                variants={itemVariants}
               >
                 <div className="txt">11岁：家庭纽带</div>
-              </motion.div>
+              </div>
             );
           })
         }
-      </motion.div>
+      </div>
       <div className="tip">点击屏幕继续测试</div>
     </div>;
   }

src/components/ReviewPanel/ReviewPanel.less

@@ -32,6 +32,14 @@
     position: absolute;
     width: 730px;
     height: 170px;
+    opacity: 0;
+    transform: translateY(-50px) scale(0.8);
+    transition: all 0.6s ease-out;
+
+    &.item-visible {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
 
     .txt {
       position: absolute;