动画

pages/index/index.vue

@@ -1,25 +1,24 @@
 <template>
     <view class="bg">
-		<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
+        <!-- 第一页 -->
-		 @touchstart="touchStart" @touchend="touchEnd"></view> -->
+        <view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0">
-		
-		<view class="content" v-show="number == 0">
             <image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
-			<image src="/static/1/1btn.png" class="btn_1" @click="click"></image>
+            <image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
         </view>
 
-		<view class="content content_2" v-show="number == 1">
+        <!-- 加载页 -->
+        <view class="content content_2" v-show="currentPage === 1">
             <image class="title_2" src="/static/1/2title.png"></image>
             <view class="progress-container">
-				<view class="progress" :style="{'width':progressNum+'%'}">
+                <view class="progress" :style="{'width': progressPercentage + '%'}">
                     <image class="dongxiao" src="/static/1/loading.png"></image>
                 </view>
             </view>
-			<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view>
+            <view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
         </view>
 
-		<view class="content" v-show="number == 2" @click="click"
+        <!-- 第二页 -->
-		 @touchstart="touchStart" @touchend="touchEnd">
+        <view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
             <image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
             <swiper class="swiper-box" :vertical="true">
                 <swiper-item>
@@ -28,16 +27,15 @@
             </swiper>
         </view>
 
-		<!-- 天生有善 后生友善 按钮 -->
+        <!-- 第三页 -->
-		<view class="content" v-show="number == 3">
+        <view class="content" v-show="currentPage === 3">
             <image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
             <view class="btn-box">
                 <image src="/static/1/btn1.png" mode="" class="btn1"></image>
-				<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
+                <image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image>
-				<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
+                <image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image>
             </view>
         </view>
-		
     </view>
 </template>
 
@@ -45,62 +43,85 @@
 export default {
     data() {
         return {
-				imgSrc: require('static/1/1.png'),
+            progressPercentage: 0,
-				progressNum: 0,
+            currentPage: 0,
-				number: 0,
+            startTouchY: 0,
-				startY: 0,
+            isFlipFade: false,
-			}
+            progressTimer: null
+        };
     },
     onLoad() {
-
+        // 页面加载时的逻辑
     },
     methods: {
-			gotoPath(url) {
+        // 跳转到指定页面
+        navigateToPage(url) {
             uni.navigateTo({
-					url: url
+                url
-				})
+            });
         },
-			click() {
+        // 处理第一页按钮点击事件
-				this.number += 1
+        handleFirstPageClick() {
-				switch (this.number){
+            this.isFlipFade = true;
+            setTimeout(() => {
+                this.handlePageClick();
+            }, 1500);
+        },
+        // 处理页面点击事件
+        handlePageClick() {
+            this.currentPage++;
+            this.updatePageContent();
+        },
+        // 根据当前页面更新内容
+        updatePageContent() {
+            switch (this.currentPage) {
                 case 1:
-						this.startProgress()
+                    this.startProgress();
                     break;
                 case 2:
-						this.imgSrc = require('static/1/2.png')
+                    // 这里可以添加第二页的特殊逻辑
                     break;
                 case 3:
-						this.imgSrc = require('static/1/3.png')
+                    // 这里可以添加第三页的特殊逻辑
                     break;
                 default:
                     break;
             }
         },
+        // 开始加载进度条
         startProgress() {
-				let timer = setInterval(()=>{
+            this.progressTimer = setInterval(() => {
-					this.progressNum++
+                this.progressPercentage++;
-					if (this.progressNum>=100) {
+                if (this.progressPercentage >= 100) {
-						this.progressNum = 100
+                    this.progressPercentage = 100;
-						clearInterval(timer)
+                    clearInterval(this.progressTimer);
-						this.number = 2
+                    this.currentPage = 2;
-					}
+                }
-				},10)
+            }, 10);
         },
-			touchStart(e) {
+        // 处理触摸开始事件
-				this.startY = e.changedTouches[0].clientY;
+        handleTouchStart(e) {
+            this.startTouchY = e.changedTouches[0].clientY;
         },
-			touchEnd(e) {
+        // 处理触摸结束事件
+        handleTouchEnd(e) {
             const endY = e.changedTouches[0].clientY;
-				const distanceY = this.startY - endY;
+            const distanceY = this.startTouchY - endY;
-				if (distanceY > 50 && this.number == 2) {
+            if (distanceY > 50 && this.currentPage === 2) {
                 console.log('上滑操作触发');
-					setTimeout(()=>{this.click()},100)
+                setTimeout(() => {
-					
+                    this.handlePageClick();
-					// 在此处编写上滑操作执行的逻辑
+                }, 100);
+            }
         }
     },
+    beforeDestroy() {
+        // 组件销毁前清除定时器
+        if (this.progressTimer) {
+            clearInterval(this.progressTimer);
         }
     }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -110,15 +131,18 @@
     font-size: 0;
     background: black;
 }
+
 .content {
     width: 100%;
     min-height: 100vh;
     position: relative;
+
     .bg-image {
         width: 100%;
         min-height: 100vh;
         height: auto;
     }
+
     .btn_1 {
         width: 569rpx;
         height: 74rpx;
@@ -126,15 +150,18 @@
         bottom: 68rpx;
         left: 95rpx;
     }
+
     &.content_2 {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+
         .title_2 {
             width: 65rpx;
             height: 76rpx;
         }
+
         .progress-container {
             width: 387rpx;
             height: 24rpx;
@@ -152,8 +179,6 @@
             }
         }
     }
-		
-		
 }
 
 .btn-box {
@@ -167,7 +192,6 @@
         position: absolute;
     }
 
-		
     .btn1 {
         width: 298rpx;
         height: 62rpx;
@@ -182,12 +206,14 @@
         left: 78rpx;
     }
 }
+
 .dongxiao {
     position: absolute;
     right: 0;
     height: 100%;
     width: 158rpx;
 }
+
 .swiper-box {
     position: absolute;
     top: 0;
@@ -197,4 +223,23 @@
     width: 100%;
     height: 100%;
 }
+
+.content-first {
+    animation: flipFade 2s forwards;
+    opacity: 1;
+    transform: rotateY(0deg);
+}
+
+/* 定义动画 */
+@keyframes flipFade {
+    0% {
+        opacity: 1;
+        transform: rotateY(0deg);
+    }
+
+    100% {
+        opacity: 0;
+        transform: rotateY(180deg);
+    }
+}
 </style>