1.0.7 / 2017-09-30

==================
 * 1.智能指纹锁页面添加动画效果

History.md

-1.0.6 / 2017-09-25
+1.0.7 / 2017-09-30
+
+==================
+ * 1.智能指纹锁页面添加动画效果
+
+1.0.6 / 2017-09-25
 
 ==================
  * 1.修改智能指纹锁页面样式

web/lib/less/device/device.less

@@ -89,6 +89,16 @@
 			background-repeat: no-repeat;
 			background-color: #242635;
 			.background-size(80px 80px);
+			&:before,
+			&:after{
+			    content: '';
+			    position: absolute;
+			    top: 0;
+			    left: 0;
+			    width: 100%;
+			    height: 100%;
+			    border-radius: 50%;
+			}
 			p{
 				position: absolute;
 			    top: 30px;
@@ -96,7 +106,7 @@
 				right: 0;
 				margin: 0 auto;
 				.bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
-				.transform-origin(top center);
+				.transform-origin(center 5px);
 			}
 	    }
 	}
@@ -113,6 +123,31 @@
 	}
 }
 
+.active .doorbellCircle .doorbell{
+	&:before,
+	&:after{
+		.animation(aperture 2s linear infinite);
+	}
+	&:after{
+		.animation-delay(-1s);
+	}
+	p{
+		.animation(shake 1s linear infinite);
+	}
+}
+
+.keyframes(shake,{
+	0%,50%,100%{
+		.transform(rotate(0deg));
+	}
+	25%{
+		.transform(rotate(-40deg));
+	}
+	75%{
+		.transform(rotate(40deg));
+	}
+});
+
 .batteryState{
 	text-align: right;
 	padding-right: 22px;
@@ -283,7 +318,7 @@
 	    height: 55px;
 	    border-width: 1px;/*no*/
     	border-radius: 50%;
-	    margin-right: 6px;
+	    margin-right: 7px;
 	    display: inline-block;
 	    vertical-align: middle;
     	&:before{

web/view/device/device.css

@@ -1018,6 +1018,17 @@ p {
   background-size: 2.133rem 2.133rem;
 }
 
+.doorbellBg .doorbellCircle .doorbell:before,
+.doorbellBg .doorbellCircle .doorbell:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
 .doorbellBg .doorbellCircle .doorbell p {
   position: absolute;
   top: 0.8rem;
@@ -1029,8 +1040,8 @@ p {
   background: url("../../resources/image/green_doorbell_icon.png") no-repeat center;
   -webkit-background-size: cover;
   background-size: cover;
-  -webkit-transform-origin: top center;
-  transform-origin: top center;
+  -webkit-transform-origin: center 0.133rem;
+  transform-origin: center 0.133rem;
 }
 
 .doorbellBg .doorbellTip {
@@ -1046,6 +1057,56 @@ p {
   margin-right: 0.267rem;
 }
 
+.active .doorbellCircle .doorbell:before,
+.active .doorbellCircle .doorbell:after {
+  -webkit-animation: aperture 2s linear infinite;
+  animation: aperture 2s linear infinite;
+}
+
+.active .doorbellCircle .doorbell:after {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+.active .doorbellCircle .doorbell p {
+  -webkit-animation: shake 1s linear infinite;
+  animation: shake 1s linear infinite;
+}
+
+@-webkit-keyframes shake {
+  0%, 50%, 100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  25% {
+    -webkit-transform: rotate(-40deg);
+    transform: rotate(-40deg);
+  }
+
+  75% {
+    -webkit-transform: rotate(40deg);
+    transform: rotate(40deg);
+  }
+}
+
+@keyframes shake {
+  0%, 50%, 100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  25% {
+    -webkit-transform: rotate(-40deg);
+    transform: rotate(-40deg);
+  }
+
+  75% {
+    -webkit-transform: rotate(40deg);
+    transform: rotate(40deg);
+  }
+}
+
 .batteryState {
   text-align: right;
   padding-right: 0.587rem;
@@ -1349,7 +1410,7 @@ p {
   height: 1.467rem;
   border-width: 1px;
   border-radius: 50%;
-  margin-right: 0.16rem;
+  margin-right: 0.187rem;
   display: inline-block;
   vertical-align: middle;
 }