# add screen animation

src/views/counter/detail.vue

@@ -2,12 +2,15 @@
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="显示屏" name="screen">
-        <screen 
-          :deviceID="this.$store.getters.deviceID"
-          :lastItem="lastItem"
-          :status="status"
-          v-if="flag"
-        ></screen>
+        <transition>
+          <screen 
+            :deviceID="this.$store.getters.deviceID"
+            :lastItem="lastItem"
+            :status="status"
+            v-if="flag"
+          >
+          </screen>
+        </transition>
       </el-tab-pane>
       <el-tab-pane label="趋势图" name="chart">
         <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
@@ -155,5 +158,10 @@ export default {
 </script>
 
 <style lang="scss">
-
+    .v-enter, .v-leave-to {
+      opacity: 0;
+    }
+  .v-enter-active, .v-leave-active {
+    transition: opacity 1.5s
+  }
 </style>