anime

src/views/Home.vue

@@ -7,7 +7,7 @@
 				<turntable />
 				<turntable />
 			</div>
 			</div>
 		</div>
 		</div>
-		<div class="mainstandby" ref='mainstandby' v-show="state == 'MAIN_STANDBY'">
+		<div class="mainstandby" ref='mainstandby'>
 			<div class="mainstandby1">
 			<div class="mainstandby1">
 				<div class="title">Vmatrix-可视化云平台</div>
 				<div class="title">Vmatrix-可视化云平台</div>
 				<div class="description">
 				<div class="description">
@@ -18,7 +18,7 @@
 		<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" v-show="state == 'MAIN_INIT_QRCODE'">
+			<div class="maininitqrcode" ref="maininitqrcode">
 				<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' v-show="state == 'MAIN_BONDING'">
-				<div class="mainbonding1">
+			<div class="mainbonding" ref='mainbonding'>
+				<div class="mainbonding1" ref='mainbonding1'>
 					<div class="title">正在配置网络</div>
 					<div class="title">正在配置网络</div>
 					<div class="description">
 					<div class="description">
 						<span>配置网络时请您保持网络稳定</span>
 						<span>配置网络时请您保持网络稳定</span>
@@ -200,9 +200,26 @@
 					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({
 				anime({
+					targets: this.$refs["maininitqrcode"],
+					width: 0,
+					//					easing: 'linear'
+					duration: 3000
+				});
+				anime({
 					targets: this.$refs["mainbonding"],
 					targets: this.$refs["mainbonding"],
 					width: 1920,
 					width: 1920,
 					easing: 'linear'
 					easing: 'linear'
@@ -210,6 +227,21 @@
 			},
 			},
 			showTitle3() {
 			showTitle3() {
 				anime({
 				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({
 					targets: this.$refs["mainstandby"],
 					targets: this.$refs["mainstandby"],
 					width: 1920,
 					width: 1920,
 					easing: 'linear'
 					easing: 'linear'
@@ -403,7 +435,7 @@
 		.maininitqrcode1 {
 		.maininitqrcode1 {
 			position: absolute;
 			position: absolute;
 			height: 500px;
 			height: 500px;
-			width: 100%;
+			width: 1920px;
 			text-align: center;
 			text-align: center;
 		}
 		}
 		.mainbonding {
 		.mainbonding {
@@ -413,26 +445,31 @@
 			top: 50%;
 			top: 50%;
 			margin-top: -150px;
 			margin-top: -150px;
 			overflow: hidden;
 			overflow: hidden;
+			right: 0;
+			
 		}
 		}
 		.mainbonding1 {
 		.mainbonding1 {
 			position: absolute;
 			position: absolute;
 			height: 500px;
 			height: 500px;
-			width: 100%;
+			width: 1920px;
 			text-align: center;
 			text-align: center;
+			right: 0;
 		}
 		}
-		.mainstandby{
+		.mainstandby {
 			width: 0;
 			width: 0;
 			height: 500px;
 			height: 500px;
 			position: absolute;
 			position: absolute;
 			top: 50%;
 			top: 50%;
 			margin-top: -180px;
 			margin-top: -180px;
 			overflow: hidden;
 			overflow: hidden;
+			right: 0;
 		}
 		}
-		.mainstandby1{
+		.mainstandby1 {
 			position: absolute;
 			position: absolute;
 			height: 500px;
 			height: 500px;
-			width: 100%;
+			width: 1920px;
 			text-align: center;
 			text-align: center;
+			right: 0;
 		}
 		}
 		.description {
 		.description {
 			width: 689px;
 			width: 689px;