描述:开门点击效果

miniprogram/pages/meeting/accessControl/accessControl.js

@@ -98,6 +98,10 @@ Page({
         let deviceId = e.currentTarget.dataset.deviceid
         let roomId = e.currentTarget.dataset.roomid
         let status = e.currentTarget.dataset.status
+        let id = e.currentTarget.dataset.id
+        // 点击切换动画
+        _this.clickSwitchAnimation(id)
+        //
         if (status != '在线') {
             Notify({
                 type: 'danger',
@@ -127,6 +131,32 @@ Page({
         })
     },
 
+    // 点击切换动画
+    clickSwitchAnimation(id) {
+        let _this = this;
+        // 切换样式
+        let equipmentDataList = _this.data.equipmentDataList.map(item => {
+            if (item.id == id) {
+                item.activity = true;
+            }
+            return item;
+        })
+        _this.setData({
+            equipmentDataList
+        })
+        setTimeout(() => {
+            equipmentDataList = _this.data.equipmentDataList.map(item => {
+                if (item.id == id) {
+                    item.activity = false;
+                }
+                return item;
+            })
+            _this.setData({
+                equipmentDataList
+            }) 
+        }, 200);
+    },
+
     // 跳转-开门记录
     jumpOpenDoorRecord() {
         wx.navigateTo({

miniprogram/pages/meeting/accessControl/accessControl.wxml

@@ -12,7 +12,9 @@
                 <view class="title">{{item.equipmentName}}</view>
                 <view class="status {{item.statusClass}}">{{item.equipmentStatus}}</view>
             </view>
-            <image class="openCloseImg" src="{{IMG_NAME + '/profile/static/meeting/accessControl/openClose.png'}}" mode="aspectFill" data-deviceid="{{item.equipmentId}}" data-status="{{item.equipmentStatus}}" data-roomid="{{item.roomId}}" bind:tap="openDoor" />
+            <view class="closeView  {{item.activity ? 'activity' : ''}}" data-deviceid="{{item.equipmentId}}" data-status="{{item.equipmentStatus}}" data-roomid="{{item.roomId}}" data-id="{{item.id}}" bind:tap="openDoor">
+                <image class="openCloseImg" src="{{IMG_NAME + '/profile/static/meeting/accessControl/openClose.png'}}" mode="aspectFill" />
+            </view>
         </view>
     </view>
 

miniprogram/pages/meeting/accessControl/accessControl.wxss

@@ -62,7 +62,42 @@
     border-radius: 10rpx;
 }
 
-.controlView .controlItem .openCloseImg {
+.controlView .controlItem .closeView {
+    position: relative;
+    overflow: hidden;
+    border-radius: 200rpx;
+    padding: 10rpx;
+}
+
+.controlView .controlItem .closeView::after {
+    box-sizing: border-box;
+    content: '';
+    display: block;
+    position: absolute;
+    border-radius: 200rpx;
+    background: rgba(255, 255, 255, 0.7);
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.controlView .controlItem .closeView.activity::after  {
+    animation: selfAnimation 0.2s;
+}
+
+@keyframes selfAnimation {
+    0% {
+        width: 0;
+        height: 0;
+    }
+    100% {
+        width: 150%;
+        height: 150%;
+    }
+}
+
+.controlView .controlItem .closeView .openCloseImg {
+    display: block;
     width: 69rpx;
     height: 69rpx;
 }