提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -44,7 +44,7 @@ import { ref } from "vue";
  * window.$originData.urlParames url参数
  */
 console.log(window.$originData);
-const page = ref("second");
+const page = ref("sex");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/sex.vue

@@ -11,11 +11,9 @@
       "
       class="firstImg"
     />
-    <img
-      :src="textimg"
-      :style="step === 1 ? 'opacity: 1' : 'opacity: 0'"
-      class="sImg"
-    />
+    <transition name="sex_step_1">
+      <img :src="textimg" v-if="step === 1" class="sImg" />
+    </transition>
     <img
       :src="text2img"
       :style="step === 3 ? 'opacity: 1' : 'opacity: 0'"
@@ -101,5 +99,18 @@ const text2img = ref(url.text2);
       margin-left: 2em;
     }
   }
+
+  .sex_step_1-enter-from,
+  .sex_step_1-leave-to {
+    opacity: 0;
+  }
+  .sex_step_1-enter-active,
+  .sex_step_1-leave-active {
+    transition: opacity 1s ease;
+  }
+  .sex_step_1-enter-to,
+  .sex_step_1-leave-from {
+    opacity: 1;
+  }
 }
 </style>