优化游览状态赋值时机

src/views/HomeView.vue

@@ -155,7 +155,7 @@
       :frame-total-num="treasureFrameTotalNum"
       :frame-interval="40"
       :image-src-func="(index) => require(`@/assets/treasure-frames/3_${(index - 1).toString().padStart(5, '0')}.jpg`)"
-      @over="tourState=2"
+      @over="tourState=2, treasureFadeOutTween.start()"
     />
   </div>
 </template>
@@ -279,20 +279,8 @@ export default {
     },
   },
   watch: {
-    tourState: {
-      handler(vNew, vOld) {
-        if (vOld === 0 && vNew === 1) {
-          this.$refs['treasure-serial-frames'].play()
-        } else if (vOld === 1 && vNew === 2) {
-          this.treasureFadeOutTween.start()
-        }
-      }
-    },
     'treasureFadeInProgress.value': {
       handler(vNew, vOld) {
-        if (vOld < 100 && vNew === 100 && this.tourState === 0) {
-          this.tourState = 1
-        }
         if (this.treasureFadeInProgress.value > 50) {
           this.$refs.treasure.style.left = this.treasureFadeInInitialLeft + (this.treasureFadeInProgress.value - 50) / 50 * (this.treasureFadeInFinalLeft - this.treasureFadeInInitialLeft) + 'px'
           this.$refs.treasure.style.top = this.treasureFadeInInitialTop + (this.treasureFadeInProgress.value - 50) / 50 * (this.treasureFadeInFinalTop - this.treasureFadeInInitialTop) + 'px'
@@ -304,13 +292,6 @@ export default {
         }
       }
     },
-    'treasureFadeOutProgress.value': {
-      handler(vNew, vOld) {
-        if (vOld < 100 && vNew >= 100 && this.tourState === 2) {
-          this.tourState = 3
-        }
-      }
-    },
     translateLength: {
       handler(vNew, vOld) {
         this.paperPositionLeft = `${vNew * landscapeSpeedRate}px`
@@ -332,12 +313,19 @@ export default {
     this.treasureFadeInTween.to({
       value: 100,
     }, treasureFadeInDuration)
+    this.treasureFadeInTween.onComplete(() => {
+      this.tourState = 1
+      this.$refs['treasure-serial-frames'].play()
+    })
     this.treasureFadeInTween.easing(TWEEN.Easing.Linear.None)
 
     this.treasureFadeOutTween = new TWEEN.Tween(that.treasureFadeOutProgress)
     this.treasureFadeOutTween.to({
       value: 100,
     }, treasureFadeOutDuration)
+    this.treasureFadeOutTween.onComplete(() => {
+      this.tourState = 3
+    })
     this.treasureFadeOutTween.easing(TWEEN.Easing.Linear.None)
 
   },
@@ -449,8 +437,8 @@ export default {
         const treasureFinalHeight = treasureFrameHeight / treasureFrameWidth * window.innerWidth
         this.treasureFinalHeightPercent = treasureFinalHeight / window.innerHeight * 100
       }
-      this.tourState = 0
 
+      this.tourState = 0
       this.treasureFadeInTween.start()
     },
     onClickStopTreasureDisplay() {