anime

src/views/Home.vue

@@ -7,18 +7,18 @@
 				<turntable />
 				<turntable />
 			</div>
 			</div>
 		</div>
 		</div>
-		<div class="mainstandby" ref='mainstandby'>
+		<div class="mainstandby" ref='mainstandby' v-show="state === 'MAIN_STANDBY'">
 			<div class="mainstandby1">
 			<div class="mainstandby1">
 				<div class="title">Vmatrix-可视化云平台</div>
 				<div class="title">Vmatrix-可视化云平台</div>
-				<div class="description">
-					<span>一个提供高质量的视觉、交互与创意效果的平台</span>
-				</div>
+			<div class="description">
+				<span>一个提供高质量的视觉、交互与创意效果的平台</span>
+			</div>
 			</div>
 			</div>
 		</div>
 		</div>
 		<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
 		<div class="title" v-show="state === 'MAIN_USELESS'">设备不可用</div>
 		<div class="title" v-show="state === 'LAUNCH'">启动页</div>
 		<div class="title" v-show="state === 'LAUNCH'">启动页</div>
 		<div class="content-container">
 		<div class="content-container">
-			<div class="maininitqrcode" ref="maininitqrcode">
+			<div class="maininitqrcode" ref="maininitqrcode" v-show="state === 'MAIN_INIT_QRCODE'">
 				<div class="maininitqrcode1">
 				<div class="maininitqrcode1">
 					<div class="title">扫描二维码添加该设备</div>
 					<div class="title">扫描二维码添加该设备</div>
 					<div class="description">
 					<div class="description">
@@ -32,8 +32,8 @@
 					</div>
 					</div>
 				</div>
 				</div>
 			</div>
 			</div>
-			<div class="mainbonding" ref='mainbonding'>
-				<div class="mainbonding1" ref='mainbonding1'>
+			<div class="mainbonding" ref='mainbonding' v-show="state === 'MAIN_BONDING'">
+				<div class="mainbonding1">
 					<div class="title">正在配置网络</div>
 					<div class="title">正在配置网络</div>
 					<div class="description">
 					<div class="description">
 						<span>配置网络时请您保持网络稳定</span>
 						<span>配置网络时请您保持网络稳定</span>
@@ -169,7 +169,7 @@
 					scale: [0, 0.5, 1],
 					scale: [0, 0.5, 1],
 					translateZ: [-1000, 0],
 					translateZ: [-1000, 0],
 					// rotateY: [0, 360],
 					// rotateY: [0, 360],
-					duration: 3000
+					duration: 2000
 				});
 				});
 			},
 			},
 			MAIN_INIT_QRCODE() {
 			MAIN_INIT_QRCODE() {
@@ -179,7 +179,7 @@
 					translateY: "-20%",
 					translateY: "-20%",
 					translateZ: [-1000, 0],
 					translateZ: [-1000, 0],
 					// rotateY: [0, 360],
 					// rotateY: [0, 360],
-					duration: 3000,
+					duration: 5000,
 					scale: [0, 1.3]
 					scale: [0, 1.3]
 				});
 				});
 
 
@@ -200,25 +200,9 @@
 					width: 1920,
 					width: 1920,
 					easing: 'linear'
 					easing: 'linear'
 				});
 				});
-				/*anime({
-					targets: this.$refs["mainbonding"],
-					width: 0,
-					easing: 'linear'
-				});
-				
-				anime({
-					targets: this.$refs["mainstandby"],
-					width: 0,
-					easing: 'linear'
-				});*/
 			},
 			},
 			showTitle2() {
 			showTitle2() {
-				anime({
-					targets: this.$refs["maininitqrcode"],
-					width: 0,
-					//					easing: 'linear'
-					duration: 3000
-				});
+				
 				anime({
 				anime({
 					targets: this.$refs["mainbonding"],
 					targets: this.$refs["mainbonding"],
 					width: 1920,
 					width: 1920,
@@ -226,21 +210,7 @@
 				});
 				});
 			},
 			},
 			showTitle3() {
 			showTitle3() {
-				anime({
-					targets: this.$refs["mainbonding"],
-					left: 0,
-					duration: 0
-				});
-				anime({
-					targets: this.$refs["mainbonding1"],
-					left: 0,
-					duration: 0
-				});
-				anime({
-					targets: this.$refs["mainbonding"],
-					width: 0,
-					duration: 3000
-				});
+				
 				anime({
 				anime({
 					targets: this.$refs["mainstandby"],
 					targets: this.$refs["mainstandby"],
 					width: 1920,
 					width: 1920,
@@ -446,7 +416,6 @@
 			margin-top: -150px;
 			margin-top: -150px;
 			overflow: hidden;
 			overflow: hidden;
 			right: 0;
 			right: 0;
-			
 		}
 		}
 		.mainbonding1 {
 		.mainbonding1 {
 			position: absolute;
 			position: absolute;
@@ -455,7 +424,7 @@
 			text-align: center;
 			text-align: center;
 			right: 0;
 			right: 0;
 		}
 		}
-		.mainstandby {
+		.mainstandby{
 			width: 0;
 			width: 0;
 			height: 500px;
 			height: 500px;
 			position: absolute;
 			position: absolute;
@@ -464,7 +433,7 @@
 			overflow: hidden;
 			overflow: hidden;
 			right: 0;
 			right: 0;
 		}
 		}
-		.mainstandby1 {
+		.mainstandby1{
 			position: absolute;
 			position: absolute;
 			height: 500px;
 			height: 500px;
 			width: 1920px;
 			width: 1920px;
@@ -585,4 +554,4 @@
 			transform: rotate(360deg);
 			transform: rotate(360deg);
 		}
 		}
 	}
 	}
-</style>
+</style>
\ No newline at end of file